In the last few years a rich set of front end development tools has emerged for building complex web applications. Gulp in particular has taken off in a huge way. However, .NET development is lagging when it comes to adoption of these tools. This is all set to change, especially with the release of ASP.NET 5 where Gulp will become part of the standard project setup. But, what is Gulp, and how do you use it in Visual Studio?
What is Gulp?
Common tasks you can get Gulp to automate
- Concatenating JavaScipt/CSS files
- Compiling your SASS/LESS
- Compiling TypeScript/CoffeeScript
- Transpiling ES6 into ES5
- Minifying Angular without breaking Dependency Injection
- …and many more
To install and use Gulp, you’ll need npm. Which begs the question…
What is npm?
npm is the package manager for Node. It’s a front-end equivalent to NuGet – you can use it to install and update packages and their dependencies. We’ll be using it to install Gulp and all its plugins.
How to set up Gulp in Visual Studio
Currently you can set up Gulp in Visual Studio 2013 and 2015. If you have 2015, skip the first 3 points as they come with Visual Studio 2015. Note that the screenshots are taken using Visual Studio 2013 with a standard MVC 5 project template.
You can install Node from here. What we’re really after here isn’t Node, it’s npm (which comes installed with Node).
After installing npm, open up a Console window, and enter:
npm install gulp -g
This will install Gulp. The “-g” option installs it globally, so you can run Gulp commands anywhere.
Install the Grunt Launcher Visual Studio Extension.Grunt Launcher provides menu options to install npm packages and run Gulp tasks from within Visual Studio.
Add Gulp to your project
The package.json is a npm file we use to define metadata about our project. Here we are listing the (front end) dependencies for developing our project – this will include plugins for running Gulp tasks. For now, we just want to add Gulp to our project.
Now, right-click on the package.json file and click “NPM install packages” (if you’ve installed Grunt Launcher) to add it to our project.
You can ignore those warnings for now – you can add the metadata it is complaining about later.
This will add a node_modules folder in your project folder, where all our npm packages will be kept. Within that will be Gulp.
Add a Gulpfile
In line 1 we load Gulp. On line 3 we define a new Gulp task. A task is a step, or a set of steps, that Gulp will execute. A task takes a function that it will run – in this case we simply log to the console. A task also has a name – here it’s called “default” and as you might guess it runs automatically when we run Gulp.
We can now run this task by right-clicking on the gulpfile.js and clicking the “Gulp” menu item added by the Grunt Launcher extension.
Now Visual Studio is running our task, and outputting “Hello world!” to the output window. We’re done! Well, not quite…
Doing something actually useful
Hello World is all well and good, but what about automating something useful? One common task is minifying CSS files, and that’s what we’ll do here.
Add the plugins
Here we’ve added two new packages, gulp-uglifycss (which minifies css) and gulp-rename (which renames files passed into it). We can now use these in our task.
Modify the task
Here’s a line by line breakdown of what the task is doing:
Line 1-3: Add references to the plugins we just added in our package.json
Line 7: Get the CSS files from our Content directory (excluding any .min files)
Line 8: Pipe (i.e. pass) the files to gulp-uglifycss, which minifies them
Line 9-12: Rename the minified files to include a .min suffix
Line 13: Save the minified files back to our Content folder
Now, we can run this task to automatically minify all our CSS files.
And there we are! We now have a process that will save us from a repetitive boring task, and we can build on this to automate lots of other tasks.
Note that for brevity I have excluded everything that isn’t necessary for getting Gulp set up in Visual Studio. There are a few things you will want to do next to get fully set up:
Install the Task Runner Explorer extension
You can install the Task Runner Explorer Visual Studio extension to run tasks automatically on each build or every time the project opens.
Install NPM Package Intellisense
NPM Package Intellisense gives you package intellisense when installing packages and plugins.
Add more plugins
Nearly any task you want to automate will have a plugin here – there are over 1500 at time of writing.