How to debug a Gulp task?

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

With Node.js version 6.3+ you can use the --inspect flag when running your task.

To debug a gulp task named css:

Find out where your gulp executable lives. If gulp is installed locally, this will be at node_modules/.bin/gulp. If gulp is installed globally, run which gulp (Linux/Mac) or where gulp (Windows) in a terminal to find it.
Run one of these commands according to your version of Node.js. If required, replace ./node_modules/.bin/gulp with the path to your gulp installation from step 1.

Node.js 6.3+: node --inspect --debug-brk ./node_modules/.bin/gulp css
Node.js 7+: node --inspect-brk ./node_modules/.bin/gulp css

Use Chrome to browse to chrome://inspect.

The --debug-brk (Node.js 6.3+) and --inspect-brk (Node.js 7+) flags are used to pause code execution on the first line of code of your task. This gives you a chance to open up the Chrome debugger and set breakpoints before the task finishes.

If you don't want the debugger to pause on first line of code, just use the --inspect flag.

You can also install the Node.js Inspector Manager (NIM) extension for Chrome to help with step 3. This will automatically open up a Chrome tab with the debugger ready to go, as an alternative to manually browsing to a URL.

Solution 2 - Javascript

For anyone using VS Code 1.10+

Open the debug panel.
Click on the settings icon.
Click on Add Configuration button.
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"
      ]
    }
  ]
}

Solution 3 - Javascript

If you are using webstorm you can right click the task in the gulp panel and select debug.

Solution 4 - Javascript

Thanks user2943490, on Windows I found this version worked for me:

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

Solution 5 - Javascript

If you are using gulp-nodemon you can do this in your gulpfile. Just pass it the execMap option:

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

Hope this helps.

Solution 6 - Javascript

Version (node v8.11.3, npm 6.2.0, gulp 3.9.1)

Windows 10 & git bash

Install Node.js V8 --inspector Manager (NiM) & set to your preference

Try this:

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

Solution 7 - Javascript

I liked the answer of @Avi Y. but I suppose people would had appreciated a more complete script :

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');
});});

Content Type	Original Author	Original Content on Stackoverflow
Question	user2943490	View Question on Stackoverflow
Solution 1 - Javascript	user2943490	View Answer on Stackoverflow
Solution 2 - Javascript	starkm	View Answer on Stackoverflow
Solution 3 - Javascript	Blowsie	View Answer on Stackoverflow
Solution 4 - Javascript	Col Wilson	View Answer on Stackoverflow
Solution 5 - Javascript	Avi Y.	View Answer on Stackoverflow
Solution 6 - Javascript	Ray Macz	View Answer on Stackoverflow
Solution 7 - Javascript	marcdahan	View Answer on Stackoverflow