Wednesday, December 2, 2015

Concat css files using Grunt


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 bundling.
However I like grunt 
  • 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"
           concat_css: cssConfig,

    //Load NPM Tasks
      grunt.registerTask("build", ["concat", "uglify", "concat_css", "cssmin"]);

3. Run the task

No comments:

Post a Comment