How to debug a Gulp task?

Question

How do I debug a gulp task defined in my gulpfile.js with a debugger such as the Google Chrome debugger, stepping through the task\'s code line by line?

Answer 1

For anyone using VS Code 1.10+

1. Open the debug panel.
2. Click on the settings icon.
3. Click on Add Configuration button.
4. Choose Node.js: Gulp Task.

This is how your launch.json file should look.

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