In 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 gulp file.
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’re 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.
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.
That’s what’s required to integrate Gulp and ASP.NET MVC
Recent Comments