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.

 

Advertisements
Posted in Formation, Visual Studio

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow me
   RSS Feed    Twitter    Linked In

Write you email address to subscribe at this blog and to receive new posts by mail.

Join 567 other followers

Who I am?






%d bloggers like this: