Using Gulp with MVC.NET

Gulp.js is an open-source JavaScript toolkit by Fractal Innovations and the open source community at GitHub, used as a streaming build system in front-end web development. Within This post I will cover the required steps for enabling Gulp inside any existing ASP.NET MVC solution.

Install Gulp

Visual Studio 2015 ships with the Task Runner Explorer a tool. This tool allows you to run Gulp tasks (minify, unit test, versioning etc.) from within Visual Studio and includes some syntax helpers as well. To get the Task Runner Explorer working with an existing project you will need to perform the following:

Step 1 – Install NPM

First you need to make sure that npm (node package manager) has been installed on your system. The chocolatey installer can be found here: https://chocolatey.org/packages/nodejs.install. Just follow the installation instructions and you are ready to continue.

Step 2 – Create a gulpfile

Using a command prompt or PowerShell, navigate to the root of your website and create a new file called gulpfile.js: copy NUL gulpfile.js (this is the same level as your web.config).

Step 3 – Create a Project file

Still located within the root of your website, type npm init for the creation of a project.json file. Provide all the required information in the prompt as shown below:

Step 4 – Install Gulp

Install Gulp by using the following command: npm install gulp -g The -g flag in this command tells npm to install Gulp globally onto your computer, which allows you to use the gulp command anywhere on your system.

At this point you will should able to call gulp directly from the command line by typing; Gulp

Step 5 – Update your project file

To keep things tidy make sure to add gulp as a development dependency by calling the following command from within the website root. npm install gulp --save-dev.

Step 6 – Test gulp from Visual Studio

open your solution in visual studio, locate the gulpfile.js (include into your vs project) and add the following.

var gulp = require(“gulp”);

gulp.task(‘hello’, function ()
{
console.log(‘Hello from gulp’);
});

Open the task runner explore and run the task called hello.

If the tasks in your gulpfile are not showing up in Visual Studio, you will need to verify that NPM and Gulp have been installed correctly.