Run Gulp Task from Visual Studio Code

Run Gulp Task from Visual Studio Code

Visual Studio Code was just released and I am using it on a project to see if I like it. I wanted to configure it to run Gulp Tasks just like I have done with other editors like Sublime Text, JetBrains Webstorm, etc. Turns out this is pretty easy to do since you can configure Gulp as a task runner in Visual Studio Code and it will display a list of Gulp tasks that you can run from the command palette.

Configure Gulp as Task Runner in Visual Studio Code

First, make sure you have a gulpfile.js or gulpfile.babel.js file in the root of your project directory. Now you need to configure Visual Studio Code to use Gulp as a task runner. Press CMD-SHIFT-P to bring up the command palette. Type in "Configure Task Runner", or "CTR" for short, to get to the "Configure Task Runner" option. Select it and choose "Gulp" as the task runner. This will create a tasks.json file in a .vscode directory in your project..

Configure Task Runner in Visual Studio Code

Configure Gulp in Visual Studio Code

{
	// See http://go.microsoft.com/fwlink/?LinkId=733558
	// for the documentation about the tasks.json format
	"version": "0.1.0",
	"command": "gulp",
	"isShellCommand": true,
	"args": ["--no-color"],
	"showOutput": "always"
}

Run a Gulp Task in Visual Studio Code

Now that Gulp is configured as a task runner in Visual Studio Code it is possible to run Gulp Tasks. Once again press CMD-SHIFT-P to open the command palette. Type "Run Task" and select it, which will bring up a list of tasks configured in Gulp. Choose the Gulp Task you want to run!

Run Task in Visual Studio Code

Run Gulp Task in Visual Studio Code

Most of your Gulp Tasks will probably be automated using gulp watch, but manual Gulp Tasks can easily be run within Visual Studio Code.

Make sure you check out Visual Studio Code Tips and Tricks.