Gulp 的 debug 方法

这里所说的 debug，是指单步调试。

假设您的计算机已经安装了 node 应用，而且在项目中安装了 gulp 依赖包，并配置好了 package.json。一句话，您的项目已能通过 npm run start 或 npm run build 进行预览或打包。

现在，我们可以使用 node --inspect-brk node_modules/gulp/bin/gulp.js [gulp 的已注册任务名称] 命令发起对 gulp 的单步调试(注意要把 [gulp 的已注册任务名称] 替换为您的 gulpfile.js 中的 gulp 任务名)。

以下以 copy-libs 这个 gulp 任务为例，展示完整的调试流程：

1. 在需要调试的任务回调中添加 debugger

   

2. 在命令行中执行 node --inspect-brk node_modules/gulp/bin/gulp.js copy-libs。注意这里的 9229 端口，在第 4 步中会用到

3. 在 Chrome 地址栏中输入 chrome://inspect/#devices 进入设备页，并点击"配置"按钮

4. 在目标发现设置的弹窗中，确保 localhost:9229 存在。这里的 9229 端口，与第 2 步保持一致

5. 现在我们在浏览器窗口中刷新，就能发现观察入口了

6. 从 inspect 入口中，我们会进入一个 DevTools 弹窗。由于我们已经在代码中加入 debugger，因此这里直接让代码继续执行即可

7. debug 断点稳稳地落在了我们的 debugger 所在行。现在，我们可以愉快地调试 Gulp 的代码了