如何调试Gulp任务？
use*_*490 41 javascript debugging node.js gulp
如何gulpfile.js使用调试器(如Google Chrome调试器)调试我定义的gulp任务,逐行执行任务的代码？
use*_*490 58
使用Node.js版本6.3+,您可以在运行任务时使用该--inspect标志.
要调试名为的gulp任务css:
找出你的gulp可执行文件的位置.如果gulp是在本地安装的,那么这将是
node_modules/.bin/gulp.如果全局安装gulp,请在终端中运行which gulp(Linux/Mac)或where gulp(Windows)以查找它.根据您的Node.js版本运行其中一个命令.如果需要,请替换
./node_modules/.bin/gulp步骤1中的gulp安装路径.- Node.js 6.3+:
node --inspect --debug-brk ./node_modules/.bin/gulp css - Node.js 7+:
node --inspect-brk ./node_modules/.bin/gulp css
- Node.js 6.3+:
使用Chrome浏览到
chrome://inspect.
该--debug-brk(Node.js的6.3+)和--inspect-brk(Node.js的7+)标志用于对你的任务的第一行代码暂停执行代码.这使您有机会在任务完成之前打开Chrome调试器并设置断点.
如果您不希望调试器在第一行代码上暂停,请使用该--inspect标志.
您还可以为Chrome 安装Node.js Inspector Manager(NIM)扩展程序以帮助完成第3步.这将自动打开Chrome选项卡,调试程序已准备好,作为手动浏览到URL的替代方法.
- 只需转到`chrome:// inspect`,您不需要知道devtools地址 (4认同)
- 现在有了更新版本的节点,节点标志已合并到`--inspect-brk`中 (4认同)
- 加载后,在`require(env.configPath);`之后在gulp.js中添加一个断点,它会加载你的gulp文件,所以你可以在Sources中找到它并添加断点. (2认同)
- 设置断点的另一种方法（除了@TrueWill 的）：使用_Sources_ 选项卡中的_将文件夹添加到工作区_，现在您可以选择在其中定义任务的任何文件，然后根据需要设置断点。 (2认同)
sta*_*rkm 13
对于使用VS Code 1.10+的任何人
- 打开调试面板.
- 单击设置图标.
- 单击" 添加配置"按钮.
- 选择Node.js:Gulp Task.
这是您的launch.json文件的外观.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Gulp task",
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
"args": [
"yourGulpTaskName"
]
}
]
}
感谢user2943490，在Windows上，我发现此版本适用于我：
node --inspect --debug-brk ./node_modules/gulp/bin/gulp.js --verbose