How to debug gulp tasks in Visual Studio Code - Gulp 4

I recently read an article about debugging gulp tasks in Visual Studio Code, which seemed like mana from heaven for me as I'm now working with nant, npm, gulp scripts, AngularJS and all the associated goodies as well as my comfort zone of Microsoft technologies.

Being very new to the non-Microsoft stuff, my debugging when encountering issues with build scripts consisted of adding the traditional console.log calls liberally throughout. This helps, but it's no substitute for being able to attach a debugger, especially when you realise that you want to see what the value of another variable was/is and have to edit and re-run the build script to determine this. Unfortunately, the instructions didn't seem to play nicely for me, spitting out the message:

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (D:\Git\VSCodeDebugNode\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (D:\Git\VSCodeDebugNode\node_modules\undertaker\lib\task.js:13:8)
    at Object. (D:\Git\VSCodeDebugNode\gulpfile.js:8:6)
    at Module._compile (module.js:641:30)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)

For a relatively simple gulp script:

var gulp = require('gulp');

gulp.task('testTask', function()
{
    console.log('hello!');
});

gulp.task('default', ['testTask']);

In order to fix this, we need to change the structure of the last line to (have a read of this to see why):

gulp.task('default', gulp.series('testTask'));

Alas, we're still seeing some odd output:

The following tasks did not complete: default, testTask
Did you forget to signal async completion?

This is also easily fixed by updating the definition of testTask to:

gulp.task('testTask', function(done)
{
    console.log('hello!');
    done();
});

There's a good explanation of why this is needed about a quarter of the way down this page:

Gulp v4 requires a stream, promise, event emitter, child process or observable to be returned from a function or task. This was resolved in the simplest case of passing a parameter into the function and firing it after the task is completed.

Hitting F5 in Visual Studio code now gives the expected output, as well as hitting any breakpoints that have been set, like the one that I had set on the console.log line that meant that testTask took nearly 3 seconds to run:

Debugging with inspector protocol because Node.js v9.2.0 was detected.
node --nolazy --inspect-brk=26246 node_modules\gulp\bin\gulp.js 
Debugger listening on ws://127.0.0.1:26246/f9aa1950-ee30-4f9c-a8aa-2989b7a8cb63
Using gulpfile D:\Git\VSCodeDebugNode\gulpfile.js
index.js:36
Starting 'default'...
index.js:36
Starting 'testTask'...
index.js:36
hello!
gulpfile.js:5
Finished 'testTask' after 2.88 s
index.js:36
Finished 'default' after 2.88 s

I've got a little bit of work to do before I can readily debug the build scripts I have here, but I do now have a simple gulp script that runs against gulp 4 which allows breakpoints to be set in Visual Studio Code and F5 being hit to start execution. Baby steps! For completness, the content of all the files that formed part of my Visual Studio Code project is below. Setting breakpoints within gulpfile.js worked a treat for me, hopefully it does for you as well!

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "GulpTester",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "runtimeArgs": [
                "--nolazy"
            ],
            "console": "internalConsole",
        }
    ]
}

package.json

{
  "name": "myproject",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "production": "gulp testTask"
  },
  "devDependencies": {
    "gulp": "~4.0.0"
  },
  "engines": {
    "node": ">=4.0.0"
  },
  "dependencies": {}
}

gulpfile.js

var gulp = require('gulp');

gulp.task('testTask', function(done)
{
    console.log('hello!');
    done();
});

gulp.task('default', gulp.series('testTask'));