asp.netgulpbowervisual-studio-2015asp.net-4.5

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

  • 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:

    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


    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.