Using a build tool like Grunt or Gulp can save you a lot of time of the development stage by automating a few repetitive “Tasks”. If you opt for Visual Studio Code as your go-to code editor, your workflow could be even more streamlined and, eventually, be more productive.
Built with Node.js at its core, Visual Studio Code allows you to run the tasks without having to leave the editor window. And we will show you how to do so in this post.
To begin with, you’ll need to have Node, NPM (Node Package Manager), and the CLI (Command Line Interface) of the respective build tool all installed in your system. If you are unsure whether you have all these installed, verifying it is as easy as typing the command lines.
I will also assume that files and directories in your project are in their proper place, including the config file, such as the gulpfile.js or Gruntfile.js if you use Grunt instead. And project dependencies registered in package.json should also be installed at this point.
The following is our project directories and files, created for the purpose of a demonstration in this article. Your project would certainly be much different; you may have more or fewer files.
Running and automating “Tasks” in Visual Studio Code is quite straightforward. First, launch the Command Palette by pressing the Shift + Cmd + P key combination or through the menu bar, View > Command Palette if that is more convenient for you. Then, type Tasks, and select “Tasks: Run Task” from the few number of options shown in the result.
Visual Studio Code is smart; it knows that we are using Gulp, pick up gulpfile.js, and reveal the list of Tasks that we have defined within the file.
Furthermore, we can integrate our project into Visual Studio Code to streamline our workflow. And integrating our Tasks in Visual Studio Code is easy and quick.
Launch the Command Palette and select “Configure Task Runner”. Visual Studio Code will give a list of build tool it supports. In this case, we select “Gulp”, since that is the one we are using in our project in this article.
Visual Studio Code should now have created a new file named tasks.json under .vscode in your project directory. tasks.json, at this point, contains bare configuration.
The taskName specifies the task name in our gulpfile.js that we would like to run. The isBuildCommand property defines the default command as the “Build” command. Now, rather than going around the Command Palette, you can simply press the key combination Shift + Cmd + B.
Alternately you may selecting the “Run Build Task” of the Tasks search result in the Command Palette.
I think Visual Studio Code is a code editor with a great future. It is fast and built with some handy features out of the box, including one which we have shown in this article.
We have seen how to run a Task from Gulp; you can also use Grunt instead. We have seen how to integrate the task into Visual Studio Code and run with a key combination, which make our workflow more streamlined.
Hopefully, you find this article helpful as a reference to run build tasks, and don’t forget to check out our previous articles on for more tips to make the most of Visual Studio Code.