如何调试Gulp任务？

Question

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

Answer 1

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

调试名为css的gulp任务：

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

2. 根据您的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

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选项卡，随时可以使用调试程序，作为手动浏览到网址的替代方法。

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" ] } ] }

Answer 3

如果您使用的是webstorm，可以右键单击gulp面板中的任务，然后选择debug。

Answer 4

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

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

希望这有帮助。

Answer 5

感谢user2943490，在Windows上我发现这个版本对我有用：

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

Answer 6

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

Windows 10和git bash

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

尝试一下：

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

Answer 7

我喜欢@Avi Y的答案，但我想人们会喜欢一个更完整的脚本：

<a *ngIf="trackNumHref" [href]="trackNumHref" target="_blank">{{trackNum}}</a>
<span *ngIf="!trackNumHref">{{trackNum}}</span>