Use Visual Studio Code Tasks with Gulp 4.0

Question

I am in the process of switching a project from Gulp 3.9.1 (npm install gulp) to Gulp 4.0 (npm install gulp-4.0.build), but when I do this, Visual Studio Code is no longer able to auto-detect the tasks in my gulpfile.js. In both cases, gulp is installed locally.

My .vscode/tasks.json looks like:

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "showOutput": "always"
}

Looking at the Tasks output, I see the following message:

Running gulp --tasks-simple didn't list any tasks. Did you run npm install?

Can you use Gulp 4.0 with VS Code and have it autodetect the tasks? If so, what steps do I need to follow to get it setup?

score 1 · Answer 1 · answered Jan 02 '18 at 18:46

Yes, you can use vscode and gulp4.0. I would look at how to upgrade to gulp4.0.

Did you uninstall gulp3.9.1 first?

You should also install gulp4.0 both locally and globally!

Then run

gulp -v

to make sure it worked. vsCode should detect both tasks in your tasks.json file and from your gulpfile.js. You are using the older tasks.json version 0.1.0. Here is an example of a tasks.json file which allows me to type "gulp sync" in the command line from anywhere in the workspaceRoot and run that task:

{
"version": "2.0.0",
"tasks": [
    {
        "label": "Start server and process files",
        "command": "gulp",
        "args": [
            "sync"
        ],
        "type": "shell",
        "options": {
            "cwd": "${workspaceRoot}"
        }
    }
]
}

It runs the "sync" task I defined in my gulpfile.js. In fact you can assign a hotkey combo to that such as:

{ "key": "shift+escape",  
  "command": "workbench.action.tasks.runTask", 
  "args": "Start server and process files"
},

in your keybindings.json.

Use Visual Studio Code Tasks with Gulp 4.0

1 Answers1