What is Gulp?

Gulp is a build process for front end development. Gulp automates all of the repetitive tasks you have to do to prepare your front end files (such as JavaScript and CSS) for development and deployment. Gulp uses small, simple, composable plugins to that let you define exactly what happens to the files in your build.

Common tasks you can get Gulp to automate

• Minifying JavaScript/CSS/images
• Concatenating JavaScipt/CSS files
• Running JavaScript lint tooling
• Compiling your SASS/LESS
• Compiling TypeScript/CoffeeScript
• Running JavaScript tests (eg Karma, Jasmine, Mocha)
• 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 [simple_tooltip content=’Node is a runtime environment built in JavaScript. It is somewhat equivalent to the .NET CLR – and for getting set up it is not necessary to know much more than that’]Node[/simple_tooltip]. 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.

1. Install Node/npm.

   You can install Node from here. What we’re really after here isn’t Node, it’s npm (which comes installed with Node).

2. Install Gulp.

   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.

3. Install the Grunt Launcher Visual Studio Extension.

   [simple_tooltip content=’Grunt is another build process for front end development. Grunt favours configuration, while Gulp favours code. I am not going to get into the merits of each here!’]Grunt Launcher[/simple_tooltip] provides menu options to install npm packages and run Gulp tasks from within Visual Studio.

4. Add Gulp to your project

   At the root of your web project, add a new JSON file called package.json with the following contents:

   {
       "devDependencies": {
           "gulp":  "3.9.0"
       }   
   }
   

   The [simple_tooltip content=’Note a standard package.json will contain other information such as a description, author and a repository for the code’]package.json[/simple_tooltip] 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.

   

5. Add a Gulpfile

   Next we want to add a Gulpfile, where we will define the steps for our build process. Add a JavaScript file called gulpfile.js to the root of the project, and add the following code:

   var gulp = require('gulp');
   
   gulp.task('default', function () {
       console.log('Hello world!');
   });
   

    

   
   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.

1. Add the plugins

   Change your package.json file to the following:

   {
       "devDependencies": {
           "gulp": "3.9.0",
           "gulp-uglifycss": "1.0.4",
           "gulp-rename": "1.2.2"
       }
   }
   

   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.

2. Modify the task

   Change the gulpfile.js to the following:

   var gulp = require('gulp'),
       uglifycss = require('gulp-uglifycss'),
       rename = require('gulp-rename');
   
   gulp.task('default', function () {
       return 
            gulp.src(['./Content/*.css', '!./Content/*.min.css'])
           .pipe(uglifycss())
           .pipe(rename({
               suffix: ".min",
               extname: ".css"
           }))
           .pipe(gulp.dest('./Content'));
   });
   

   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.

Next steps

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:

1. 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.

2. Install NPM Package Intellisense

   NPM Package Intellisense gives you package intellisense when installing packages and plugins.

3. Add more plugins

   Nearly any task you want to automate will have a plugin here – there are over 1500 at time of writing.

Happy Gulping!