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

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.

Solution 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.

Solution 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.