Automatically Running A Grunt or Gulp Task When Loading a Visual Studio Project

Chris Love

Last Updated - Sat Jan 09 2021

Unless you have been out of the web development space the past 3-4 years you are using Grunt, Gulp or another task running to 'build' your web code. If you are not familiar with Grunt or Gulp please visit their project pages to get a better idea how they benefit your development work flow. One thing I and other developers rely upon is the watch task to automatically execute tasks for us as files are saved. My common need is to process less files, compiling them to CSS. But I hate opening a command prompt and typing a needless end of typo prone commands to launch the task every time I start working on a project.

Fortunately Visual Studio now has a built in task running, designed to run Grunt and Gulp tasks. More importantly it is designed to let you configure tasked to be automatically executed before and after a build, or when you execute a clean command. A fourth option it to execute a task when the project is opened. This last option empowers developers to launch a watch task, effectively extending the built in task runner to execute specific tasks as files are updated.

Configuring Visual Studio Task Runner to Execute A Task When the Project is Opened

If you have never used or opened the built in task runner it is simple, press Alt + Shift + Backspace or select it from the other windows list from the View menu. You should see the task runner window at the bottom of Visual Studio. Remember Visual Studio windows are dockable and 'floatable', so it may launch somewhere else on the screen.

The Task Runner view has two windows, the left window list your Grunt or Gulp file and its configured tasks. If you do not see this check your configuration file for a syntax error.

The right window is a command line console. Here you will see commands executed and their outputs.

To enable the watch task or any other task to execute when the project is loaded, right-click the task in the left window. This will invoke a context menu. You can select to run the task, but for this exercise you want to bind a task. So expand the bindings option. Now select project open. That is it, you are done.

Once you bind the watch task to the project open event you will see the command echoed in the console log.

Now close Visual Studio and open your project again. This time the watch task will automatically run. To test it out edit a file the watch task watches. Save your changes, I just added a comment to a less file and saved it. You will see the task run in the console log. That is it you have confirmed your task runs when the project opens.

Summary

The Grunt watch task is one of the more important modules for me because it triggers important tasks to just automatically run as I edit files. Since migrating from pure CSS to LESS earlier this year the watch task has become indispensable. Because Grunt, Gulp and other task runners have vast ecosystems there are many other tasks and process chains development teams should have run to build their web projects. Having a watch process automatically run when Visual Studio opens the project makes these steps just happen without having to think about it. This can cut down many lengthy startup task lists some teams rely upon, making the development process more enjoyable and consistent.

I believe the Visual Studio task runner ships with Visual Studio 2015. But in case your Visual Studio does not have the task runner extension you can download it from the Visual Studio Gallery.