Using Grunt, Bower, Gulp, NPM with Visual Studio 2015 for a ASP.NET 4.5 Project

Question

Visual Studio 2015 comes with built in support for tools like Grunt, Bower, Gulp and NPM for ASP.NET 5 projects.

However when I create a ASP.NET 4.5.2 project using Visual Studio 2015 it doesn't use these tools. I'd like to use bower instead of nuget to manage client side packages.

I can find information about using these tools with Visual Studio 2013 (see this question for example). But I guess the procedure is different for Visual Studio 2015 since it has built in support for these tools.

Ranna

Answer 1

While Liviu Costea's answer is correct, it still took me quite some time to figure out how it is actually done. So here is my step-by-step guide starting from a new ASP.NET 4.5.2 MVC project. This guide includes client-side package management using bower but does not (yet) cover bundling/grunt/gulp.

Step 1 (Create Project)

Create a new ASP.NET 4.5.2 Project (MVC Template) with Visual Studio 2015.

Step 2 (Remove Bundling/Optimization from Project)

Step 2.1

Uninstall the following Nuget Packages:

• bootstrap
• Microsoft.jQuery.Unobstrusive.Validation
• jQuery.Validation
• jQuery
• Microsoft.AspNet.Web.Optimization
• WebGrease
• Antlr
• Modernizr
• Respond

Step 2.2

Remove App_Start\BundleConfig.cs from project.

Step 2.3

Remove

using System.Web.Optimization;

and

BundleConfig.RegisterBundles(BundleTable.Bundles);

from Global.asax.cs

Step 2.4

Remove

<add namespace="System.Web.Optimization"/>

from Views\Web.config

Step 2.5

Remove Assembly Bindings for System.Web.Optimization and WebGrease from Web.config

Step 3 (Add bower to Project)

Step 3.1

Add new package.json file to project (NPM configuration file item template)

Step 3.2

Add bower to devDependencies:

{
  "version": "1.0.0",
  "name": "ASP.NET",
  "private": true,
  "devDependencies": {
    "bower": "1.4.1"
  }
}

The bower package is automatically installed when package.json is saved.

Step 4 (Configure bower)

Step 4.1

Add new bower.json file to project (Bower Configuration file item template)

Step 4.2

Add bootstrap, jquery-validation-unobtrusive, modernizr and respond to dependencies:

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "bootstrap": "*",
    "jquery-validation-unobtrusive": "*",
    "modernizr": "*",
    "respond": "*"
  }
}

These packages and their dependencies are automatically installed when bower.json is saved.

Step 5 (Modify Views\Shared\_Layout.cshtml)

Step 5.1

Replace

@Styles.Render("~/Content/css")

with

<link rel="stylesheet" href="~/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/Site.css" />

Step 5.2

Replace

@Scripts.Render("~/bundles/modernizr")

with

<script src="~/wwwroot/lib/modernizr/modernizr.js" ></script>

Step 5.3

Replace

@Scripts.Render("~/bundles/jquery")

with

<script src="~/wwwroot/lib/jquery/dist/jquery.min.js"></script>

Step 5.4

Replace

@Scripts.Render("~/bundles/bootstrap")

with

<script src="~/wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>

Step 6 (Modify other sources)

In all other Views replace

@Scripts.Render("~/bundles/jqueryval")

with

<script src="~/wwwroot/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

---

Useful Links

• http://idisposable.co.uk/2015/02/switching-the-client-side-build-library-in-visual-studio-2013-mvc-template-to-gulp-and-bower/
• http://www.baconapplications.com/running-bower-grunt-in-visual-studio-2013/
• https://web.archive.org/web/20190611132417/http://old.devkimchi.com:80/2015/01/06/integrating-grunt-and-bower-with-visual-studio-2013
• http://www.dotnetcurry.com/visualstudio/1096/using-grunt-gulp-bower-visual-studio-2013-2015
• http://andy-carter.com/blog/a-beginners-guide-to-package-manager-bower-and-using-gulp-to-manage-components
• http://www.jeffreyfritz.com/2015/05/where-did-my-asp-net-bundles-go-in-asp-net-5/

---

Bundling & Minifying

In the comments below LavaHot recommends the Bundler & Minifier extension as a replacement for the default bundler which I remove in step 2. He also recommends this article on bundling with Gulp.

Ranna

Thank you VERY MUCH. Am I right that there is one step missed: how to map ~/wwwroot to /../bower_components (or gulp/grunt config how to move bower packages to "~/wwwroot" ) Could you add this step and describe how you would recommend to arrange the js/css code for running with IIS Express in VS2015 environment? – Numbles

When you create a bower.json file through Visual Studio 2015, it will automatically create a bowerrc file as well, which overrides the default location for bower installs from bower_components to wwwroot/lib – Aloe

So it turns out bundling is quite useful to me. Now that you've removed the default bundler, I'd like to recommend Bundler & Minifier to replace it. It uses the Task Runner Explorer and has a configuration file similar to npm and bower. It's a part of Web Essentials as well, so you might already have it installed. – Individuation

Here's a nice article on the topic to bundle with gulp. – Individuation

@Individuation thanks for these interesting links. I was so free as to include your links in my answer. – Ranna

Thanks for the detailled info @SagebrushGIS! I'm also investigating on how to add Bower package management to my MVC project. I've added the bower.json via VS2015, but I don't see the bowerrc file you are talking about. Any steps I could be missing or where should I find this file? As a work around for now, I use: <link rel="stylesheet" href="~/bower_components/bootstrap/dist/css/bootstrap.min.css" /> – Ibbetson

bower_components and node_modules folders are not designed to be exposed by the web server. I recommend to create gulp task to copy the distributables files into the project's folder structure that is part of publishing process and your html paths need to be relative. – Wessex

Fantastic, thanks i was looking for that. just an extension for the answer so you dont look around if you set behind the proxy and have ssl error. please follow this answer #3777575 – Mouflon

Answer 2

It is actually not too different. It is just that there is better support for all these inside Visual Studio, for example when you add new items you have templates for bower or npm config files. Also you have templates for gulp or grunt configuration files.
But the actually calling of grunt/gulp tasks and binding them to build events is still done with Task Runner Explorer, just like in VS 2013.

Levi

I guess I still don't see how you install npm packages in VS with the tool installed. Every time I try an .npm install it says my project isn't setup for node or whatever – Wondrous

you need to have package.json created first in the root folder. I usually create that in the root of the target project as sibling of csproj file. then, you can use npm commands – Wessex