Concat css files using Grunt

Grunt-concat-css

Need : We can reduce the no of http request to the server which would directly improve performance

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

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-concat-css 

npm install grunt-concat-css --save-dev

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

•   we need specify the source files which needs to be bundled
•   we need specify the dest file name
•   Load npm task
•   Register the task

module.exports = function (grunt) {
    var cssConfig = {
        options: {},
        all: {
            src: ["Content/Core/bootstrap.css", "Content/Core/site.css", "Content/Core/select.css"],
            dest: "Content/release/core.css"
        }
    };
  grunt.initConfig({
           concat_css: cssConfig,

     });
    //Load NPM Tasks
    grunt.loadNpmTasks('grunt-concat-css');
      grunt.registerTask("build", ["concat", "uglify", "concat_css", "cssmin"]);
};

3. Run the task