Minify css files using Grunt

Grunt-contrib-cssmin

Need : 

• We can remove unwanted space and reduce the size of css sent across the network
• Minification will provide an additional 6-16% lower file size.

I used to use yahoo compressor and also used asp.net minification

However I like grunt 
reason

• Physical file are created at compile time
• Grunt provides thousands of useful plugins ex: To convert less file to css

Note: we need to install grunt and configure visual studio to run grunt as task runner.

more information is provided at my previous post

Grunt with Visual Studio

Steps invloved for css concat

1.We need to install plugin Grunt-contrib-cssmin

 npm install grunt-contrib-cssmin --save-dev

2. Once the plugin is installed, we need to write config entries in grunfile.js.

•   We need specify the source files which needs to be minified
•   we need to specify the destination file name
•   Load npm task
•   Register the task

module.exports = function (grunt) {
   var cssminConfig = {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
        target: {
                files: {
                    "Content/release/core.min.css": ["Content/release/core.css"]
                }
        }
    }
  grunt.initConfig({
         cssmin: cssminConfig

     });
    //Load NPM Tasks
    grunt.loadNpmTasks("grunt-contrib-cssmin");
    grunt.registerTask("build", ["cssmin"]);
};

3. Run the task