Running Gulp Tasks from Visual Studio Code

I recently started running my gulp tasks directly from Visual Studio Code instead of command line, I am going to explain how to do that.

Step1: Make sure your project has Gulpfile.js or gulpfile.babel.js

Step2: In Visual Studio Code once you open the project, press CMD + SHIFT + P (CTRL + SHIFT + P in Windows), this open the Command Pallet.

command palette

Step3: In Command Pallet type Configure Task Runner or CTR then select Configure Task Runner.

command palette tasks

Step4: Above step will show the list of task runners supported by Visual Studio Code, select Gulp form list.

gulp task

Step5: Above step will create a tasks.json file under .vscode folder in your project.

tasks json

Step6: Now launch Command Pallet once again by by pressing CMD + SHIFT + P (CTRL + SHIFT + P in Windows), type Run Task and select it.

command palette run task

Step7: Above step will display the list of task in your Gulp file.

gulp tasks

Step8: You can select any task from the list. I am select the default task from gulp tasks, you can see the default task running below.

gulp default task

If you want stop any currently running task in Visual Studio Code, go to command pallet then select Terminate Running Task. We follow the same process to run the tools like Ant, Gulp, Make, Maven, MSBuild, NPM, Jake or any tool we can run from command line in Visual Studio Code.

Using ECMAScript 2015 (ES2015/ES6) with Gulp

gulp-es2015

Follow the below steps to use ECMAScript 2015 (formerly known as ECMAScript 6) while writing gulp file.

Step 1:

From gulp 3.9 version onwards we can use ECMAScript 2015, so make sure you installed the latest version of gulp into your project.

Check the gulp version before proceeding, run the following command at root of the project to check the currently installed gulp version.

Read More