Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to debug a Gulp task?

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?

like image 480
user2943490 Avatar asked Oct 14 '16 00:10

user2943490


People also ask

How do I run Gulpfile in Visual Studio?

Run a Gulp Task in Visual Studio CodeType "Run Task" and select it, which will bring up a list of tasks configured in Gulp. Choose the Gulp Task you want to run! Most of your Gulp Tasks will probably be automated using gulp watch, but manual Gulp Tasks can easily be run within Visual Studio Code.

What is gulp watch command?

Advertisements. The Watch method is used to monitor your source files. When any changes to the source file is made, the watch will run an appropriate task. You can use the 'default' task to watch for changes to HTML, CSS, and JavaScript files.


1 Answers

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

To debug a gulp task named css:

  1. 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.

  2. 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
  3. 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.

like image 103
user2943490 Avatar answered Sep 30 '22 22:09

user2943490