Grunt and Bower in Visual Studio 2015

In some days, Visual Studio 2015 will be release. Previously (VS2013), to minify some JavaScript files, we used Web Essentials and bundle files. In the new version of Web Essentials (2015) : “Bundling, minification and compilation of LESS, Sass and CoffeeScript is no longer part of Web Essentials 2015” (http://vswebessentials.com/changelog).

The solution is to install the new extensions Bundler & Minifier and Web Compiler instead, or to use the new Grunt and Bower features included in Web Essentials 2015.

This post explain how to configure and how to use Grunt and Bower to clean, minify and copy JavaScript files.

• Start Visual Studio 2015.
• Install Web Essential 2015 from Tools / Extensions and Updates.
• Create a new Web or ASP.NET project (or use your existing web project).
• In your Solution Explorer, right-click on you project and select “Add Grunt and Bower to your project”. Three files have been added : bower.json to define all dependencies for your project (jQuery, Bootstrap, etc). gruntfile.js to describe how to clean, to minify or to copy some folders or files of your project. package.json to set all modules (plugins) to use with Grunt. EDIT: This menu item is no longer available. You need to add these files via "Project / Add new item" (Bower configuration file, Grunt configuration file and NPM configuration file).
• Edit the file package.json to add clean, copy and uglify (minifier) modules for Grunt.

{
   "name": "package",
   "version": "1.0.0",
   "private": true,
   "devDependencies": {
      "grunt": "0.4.5",
      "grunt-contrib-clean" : "0.6.0",
      "grunt-contrib-copy"  : "0.8.0",
      "grunt-contrib-uglify": "0.9.1"
   }
}

• Edit the Bower.json file to add a dependency to jQuery.

{
   "name": "bower",
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
      "jQuery": "2.1.4"
   }
}

• Edit the GruntFile.js to explain what and how to clean my target folder (wwwroot), to copy jquery.js to this folder and to minify two sample JavaScript files to Myproject.min.js.

module.exports = function (grunt) {
    grunt.initConfig({
        clean: [
            "wwwroot"
        ],

        copy: {
            main: {
                files: [
                    { expand: true, cwd: "bower_components/jQuery/dist", src: "jquery.js", dest: "wwwroot/js" }
                ]
            }
        },

        uglify: {
            my_target: {
                files: {
                    "wwwroot/myproject.min.js": ["MyFile1.js", "MyFile2.js"]
                }
            }
        }

    });

    grunt.registerTask("default", ["clean", "copy", "uglify"]);

    grunt.loadNpmTasks("grunt-contrib-clean");
    grunt.loadNpmTasks("grunt-contrib-copy");
    grunt.loadNpmTasks("grunt-contrib-uglify");
};

• Finally, open the Task Runner Explorer panel and right-click on the Default Alias Task to run the Grunt script.