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.

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/
• http://devkimchi.com/1511/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.