如何调试Gulp任务？

Question

我该如何使用调试器（例如Google Chrome调试器）逐行调试我的gulpfile.js中定义的gulp任务的代码？

- user2943490

Answer 1

使用 Node.js 6.3+ 版本时，运行任务时可以使用 --inspect 标志。

要调试名为 css 的 gulp 任务：

1. 找出 gulp 可执行文件所在的位置。如果 gulp 已本地安装，则在 node_modules/.bin/gulp 中。如果 gulp 全局安装，可以在终端中运行 which gulp（Linux/Mac）或 where gulp（Windows）来查找它。

2. 根据您的 Node.js 版本之一运行以下命令。如有必要，请用步骤 1 中的 gulp 安装路径替换 ./node_modules/.bin/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

3. 使用 Chrome 浏览器打开 chrome://inspect 网址。

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

如果不想使调试器在代码的第一行暂停，请使用 --inspect 标志。

您也可以安装 Node.js Inspector Manager（NIM） 扩展程序来帮助进行第三步操作。这将自动打开一个 Chrome 标签页，准备好调试器，作为手动浏览 URL 的替代方法。

- user2943490

---

一旦加载完成，在gulp.js中的require(env.configPath);后添加断点 - 这将加载您的gulpfile，因此您可以在Sources中找到它并添加断点。 - TrueWill

只需前往 chrome://inspect，无需知道开发者工具的地址。 - Capripot

现在有更新的Node版本，它将节点标志合并为只有--inspect-brk。 - joeycozza

我不得不使用./node_modules/gulp/bin/gulp.js，而不是./node_modules/.bin/gulp。 - Adrian Dymorz

除了@TrueWill提供的方式外，设置断点的另一种方法是：在_Sources_选项卡中使用_添加文件夹到工作区_，现在您可以选择您定义任务的任何文件，然后根据需要设置断点。 - zypA13510

Answer 2

如果您正在使用VS Code 1.10+，请按照以下步骤进行操作：

1. 打开调试面板。
2. 单击设置图标。
3. 单击“添加配置”按钮。
4. 选择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"
      ]
    }
  ]
}

- starkm

---

谢谢您提供这个示例！ - Xunnamius

在使用VS Code添加新的构建配置时，您可以选择一个“Node.js: Gulp task”模板。它将插入一个类似于上面代码的新配置。无需复制和粘贴 :) - Heinrich Ulbricht

好的，这是配置文件 - 但我如何开始调试？ - ESP32

我不知道为什么，但使用这个配置我无法设置断点。相反，我的代码中添加console.log(...)语句的方法起作用了。 - Jean Paul

也许与我的Gulfile命名为Gulpfile.js有关，因为我将其重命名为gulpfile.js，现在断点被触发了（我使用的是VS Code 1.45.1的Windows系统）。 - Jean Paul

这个配置的小问题是任务的输出只在VSCode的调试控制台中。为了让gulp任务在终端中运行并显示完整的输出，您需要将"console": "integratedTerminal"添加到此配置中。 顺便说一下，当前（vscode v.1.50）默认使用"type": "pwa-node"。 - Sharak

Answer 3

如果您使用的是WebStorm，您可以在Gulp面板中右键单击任务，然后选择“调试”。

- Blowsie

Answer 4

感谢user2943490，对于Windows系统，我发现这个版本适合我：

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

- Col Wilson

---

谢谢，定位到./node_modules/gulp/bin/gulp.js对我很有帮助。 - Andrej Gaspar

Answer 5

如果您正在使用gulp-nodemon，您可以在gulpfile中执行此操作。 只需传递execMap选项即可：

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

希望这有所帮助。

- Avi Y.

Answer 6

版本 (node v8.11.3, npm 6.2.0, gulp 3.9.1)

Windows 10 & git bash

安装 Node.js V8 --inspector Manager (NiM) 并设置为您的 首选项

尝试这个：

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

- Ray Macz

Answer 7

我喜欢@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');
});});

- marcdahan