Gulp and ASP.NET MVC

Gulp and ASP.NET MVC

Within This post I will cover the required steps for enabling Gulp inside any existing ASP.NET MVC solution. This will also resolve some of the issues related to tasks not showing up within Task Runner Explorer.

Gulp and ASP.NET MVC – environment setup

If you are working on ASP.NET MVC related projects with quite a lot of JavaScript, then you might want to streamline your client side build process.

Gulp, a client side related build tool, can be used to accomplish this. And the good news for all Visual Studio fans; VS has some tooling available to make things even easier.

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:

project file creation

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.

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

visual studio task runner

run gulp in visual studio

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.

  • Andrew Dick

    Will this work if the package.json/node modules folder are in the parent directory?
    The only reason I ask is the VS packages are housed here, surely it makes sense to store any other packages here as well?

    • Hi Andrew, thank you for your question.

      Yes, you can change the location if desired. I also prefer having the nodes_modules next to the nuget packages folder.

Post Navigation