Home » ASP.NET MVC » Using Node.js and Gulp with ASP.NET in Visual Studio 2015

Using Node.js and Gulp with ASP.NET in Visual Studio 2015

As I’ve written before, I’m using Angular a lot recently to write the client side of my web applications.  As I’ve gotten to the end of my current project, I found myself needing to implement cache busting and while I am at it compression.  But because I’m using a regular HTML page to serve up the shell for my single page application, using the regular ASP.NET on the fly compression wasn’t going to work for this application.

But there are a lot of tools in the Node.js space that will work.  Would it be possible to wire node.js and Gulp with ASP.NET in my existing web project?

It turns out you can. Although, at this point, it isn’t as straightforward as most other things in Visual Studio.

image

Installing Node.js

I’m assuming that you’ve already installed Visual Studio 2015.  If you did that, you already have Node.js installed.  The problem is, it isn’t the most recent version.  So, what you want to do is to install the most recent of version from the Node.js site manually.

Once you have Node.js installed, the next thing you will need to do is that you’ll need to configure Visual Studio to use the version you installed instead of the version it installed.  To do this, navigate to “Tools” > “Options”.  In the resulting dialog, find the “Projects and Solutions” > “External Web Tools” leaf in the tree control and then add the directory to your newly installed Node.js installation to the top of the list of paths to external tools.

image

NPM

To use Gulp, you will need to install Gulp using the Node Package Manager (npm).  There are several places where I got stuck.

First, I tried to install gulp using the Node Interactive Window (CTRL-K,N).  This works fine when you want to install something globally, but when you want to install something with the –save or –save-dev option, you will get the error message:

Please specify a valid Node.js project or project directory.

It took me several tries before it finally dawned on me that it wasn’t just asking “What project do you want to install this in?”  It was asking “What Node project do you want to install this in?”

We don’t have a node project, so this will never work.  What you will need to do instead is that you’ll need to shell out to the command prompt, change to the project directory, and then type your npm commands.

Productivity Power Tools

You can shell out to the command prompt much easier if you install the Visual Studio Productivity Power Tools  Once these are installed, you can right click on the project you want to install npm packages into and select “Power Commands” > “Open Command Prompt…” from the menu.

NPM init

Much like NuGet’s packages.config file, NPM uses a json file to keep track of what should be installed.  To create this file, run the command

npm init

and answer the questions.

Next, in Visual Studio, click the “Show all files” icon in Solution Explorer, find the package.json file that you just created with the npm init command, and include the package.json file in your project.  This will cause it to be part of your commit so that anyone who pulls your code down from version control will have the packages installed automatically.

Install Gulp

Once you’ve shelled out to the command prompt, you’ll need to type in the following two commands.

npm install gulp -g
npm install gulp –save-dev

If you open your package.json file now, you will see an entry for gulp.

Create a Gulp task

The final step in this process is to create the actual Gulp job.  To do that, all you need to do is create a gulpfile.js file in the root of the project.

Inside the gulpfile.js file, add the following:

var gulp = require('gulp');

gulp.task('default', function () {
    // place code for your default task here
});

And now you have a default task for gulp installed.

Make Gulp Part of the Build

The final step here is that we want to make gulp part of the build.  Otherwise, what’s the point?

In Visual Studio 2015, this is really rather simple.

From the main menu, go to “View” > “Other Windows” > “Task Runner Explorer”.  You should end up looking a a sub windows in Visual Studio that looks like this:

image

In gulp, you might have multiple tasks in a gulp file. We only have one right now, “default”.  If you right click on that, you will see that you can bind that task to one of the four bindings on the right.

That’s all you have to do.  Now the gulp task “default” is bound to a specific build step.  You can do all kinds of file processing with this which we may cover in a later post.  But for now, you can at least get it all wired in.

 

Other post in ASP.NET MVC

Related Post

  • Using Gulp to Bundle, Minify, and Cache-bustUsing Gulp to Bundle, Minify, and Cache-bust Last week I discussed how to setup Node.js and Gulp in Visual Studio 2015.  During that discussion, I mentioned that I’m using gulp to bundle, minify and cache-bust my HTML, CSS, and […]
  • Node.js Tools For Visual StudioNode.js Tools For Visual Studio Several weeks ago now, I started learning Node.js.  Why?  Well, for a couple of reasons.  First, all the cool kids are using Node.js.  Second, I wanted to use Istanbul to get an idea of […]
  • ListView and the DataPagerListView and the DataPager One of the new controls that Visual Studio 2008 brings us is the ListView.  Now, the ListView control is really several different controls all rolled into one.  There is a lot to see with […]
  • WebForms vs MVC–The War Is OverWebForms vs MVC–The War Is Over loading... I just finished listening to a DotNetRocks podcast today with Paul Sheriff which largely talked about creating mobile web sites using ASP.NET WebForms. During the show they […]
  • Validating A WebForms Checkbox . . .Validating A WebForms Checkbox . . . . . . and other ASP.NET controls that the Validation controls can not be wired to. The presentation today may be something you already know how to do.  But, this question comes up […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS. Does your team need additional help in any of the above? Contact Dave today.

3 Pingbacks/Trackbacks