Javascript 如何调试一个Gulp任务？

如何使用调试器（如Google Chrome调试器）逐行调试my

gulpfile.js

中定义的gulp任务？

使用Node.js 6.3+版，您可以在运行任务时使用

要调试名为

css

的gulp任务，请执行以下操作：

找出你的可执行文件所在的位置。如果gulp是本地安装的，则它将位于

节点_modules/.bin/gulp

。如果gulp是全局安装的，请在终端中运行

哪个gulp

（Linux/Mac）或

哪个gulp

（Windows）来查找它

根据Node.js的版本运行其中一个命令。如果需要，请将

/node\u modules/.bin/gulp

替换为步骤1中的gulp安装路径

• Node.js 6.3+：

  Node--inspect--debug brk./Node_modules/.bin/gulp css

• Node.js 7+：

  Node——检查brk./Node\u modules/.bin/gulp css

使用Chrome浏览到

chrome://inspect

--debug brk

（Node.js 6.3+）和

--inspect brk

（Node.js 7+）标志用于暂停任务第一行代码上的代码执行。这使您有机会在任务完成之前打开Chrome调试器并设置断点

如果不希望调试器暂停在代码的第一行，只需使用

--inspect

标志

---

您还可以安装Chrome扩展来帮助执行步骤3。这将自动打开一个Chrome选项卡，调试器已准备就绪，可以替代手动浏览URL。

如果您使用gulp nodemon，则可以在gulpfile中执行此操作。 只需将execMap选项传递给它：

gulp.task('default', function() {
    nodemon({
        script: 'server.js',
        ext: 'js',
        execMap: {
            js: "node --inspect"
        }
    })
}

---

希望这对您有所帮助。

如果您正在使用webstorm，可以右键单击gulp面板中的任务并选择debug

---

谢谢用户2943490，在Windows上我发现这个版本适合我：

---

node--inspect--debug brk./node_modules/gulp/bin/gulp.js--verbose

适用于使用VS code 1.10的任何人+

打开调试面板

单击设置图标

单击添加配置按钮

选择Node.js:gulptask

这就是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"
      ]
    }
  ]
}

版本（节点v8.11.3、npm 6.2.0、gulp 3.9.1）

windows10&gitbash

安装并设置为您的

试试这个：

node --inspect-brk ./node_modules/gulp/bin/gulp.js --verbose

---

我喜欢@Avi Y的答案。但我想人们会喜欢更完整的剧本：

gulp.task('nodemon', ['sass'], function(cb) {
var started = false;
    consoleLog('nodemon started');
return nodemon({
    //HERE REMOVE THE COMMENT AT THE BEGINING OF THE LINE YOU NEED
    //exec: 'node --inspect --debug-brk node_modules/gulp/bin/gulp.js', 
    exec: 'node --inspect --debug-brk',
    //exec: 'node --inspect',
    script: path.server,
    ignore: ['*/gulpfile.js', 'node_modules/*'],
    verbose: true
}).on('start', function() {
    if (!started) {
        cb();
        started = true;
    }
}).on('restart', function() {
    consoleLog('nodemon restarted the server');
});});

---

加载后，在gulp.js中的

require（env.configPath）之后添加一个断点-加载gulpfile，以便您可以在源代码中找到它并添加断点。只需转到
chrome://inspect
，您现在不需要知道node较新版本的devtools地址，节点标志被合并为
--inspect brk
我不得不使用
/node\u modules/gulp/bin/gulp.js
而不是
/node\u modules/.bin/gulp
设置断点的另一种方法（除了@TrueWill的方法）：使用“源”选项卡中的“将文件夹添加到工作区”，现在您可以选择在其中定义任务的文件，然后根据需要设置断点。感谢您提供此示例！使用VS代码添加新的构建配置时，可以选择Node.js:Gulp任务模板。它将插入一个与上面代码类似的新配置。无需复制和粘贴：）好的，这就是配置-但我如何开始调试？我不知道为什么，但使用此配置我无法设置断点。在我的代码中添加
console.log（…）
语句的方法起了作用。可能这与我的Gulpfile被命名为
Gulpfile.js
有关，因为我重命名了它
Gulpfile.js
，现在触发了断点（我在Windows上使用VS code 1.45.1）。谢谢，定位./node_modules/gulp/bin/gulp.js帮了我的忙