grunt-cssc

css-condense grunt plugin

grunt-cssc

grunt-cssc is a grunt plugin which allows the use of css-condense module within grunt. grunt-cssc also use native grunt concat instruction

  1. Install grunt-cssc module via npm in your project directory npm install grunt-cssc.
  2. Add grunt.loadNpmTasks('grunt-cssc'); to your gruntfile.
  3. Setup grunt-cssc task files sources and destination
 
// long way 
"cssc": {
  dist:{
    src: "examples/css/**/*.css",
    dest: "examples/main.css"
  }
}
// or short way 
"cssc": {
  dist:{
    "examples/main.css": "examples/css/**/*.css"
  }
}

See grunt concat for other files system access.

  1. Setup grunt-cssc options
csscOptions:{
  sortSelectors: true,
  lineBreaks: true,
  sortDeclarations:true,
  consolidateViaDeclarations:false,
  consolidateViaSelectors:false,
  consolidateMediaQueries:false,
},
 

It is based upon css-condense and can be set with :

  • sortSelectors (Boolean) : if true, sort css files by selectors
  • lineBreaks (Boolean) : if true, trim line breaks
  • sortDeclarations (Boolean) : if true, sort css selectors by declarations
  • consolidateViaDeclarations (Boolean) : if true, merge by declarations
  • consolidateViaSelectors (Boolean) : if true, merge by selectors
  • consolidateMediaQueries (Boolean) : if true, merge by mediaqueries
  • compress (Boolean) : if true, compress the file
  • sort (Boolean) : if false, turn off sorting
  • safe (Boolean) : if true, avoid the use of consolidate
  1. Setup watch instruction
watch: {
  "cssc": {
    files: ['<config:cssc.dist.src>'],
      tasks: 'cssc'
  }
}
 
module.exports = function(grunt) {
  "use strict";
  
  grunt.loadNpmTasks("grunt-cssc");
  
  // Project configuration. 
  grunt.initConfig({
    test: {
      files: ['test/**/*.js']
    },
    lint: {
      files: ['grunt.js', 'tasks/**/*.js', 'test/**/*.js']
    },
    cssc: {
      dist:{
        src: "examples/css/**/*.css",
        dest: "examples/main.css"
      }
    },
    csscOptions:{
      sortSelectors: true,
      lineBreaks: true,
      sortDeclarations:true,
      consolidateViaDeclarations:false,
      consolidateViaSelectors:true,
      consolidateMediaQueries:true,
      compress:true,
    },
    watch: {
      "cssc": {
        files: ['<config:cssc.dist.src>'],
          tasks: 'cssc'
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        node: true,
        es5: true
      },
      globals: {}
    }
  });
 
  // Default task. 
  grunt.registerTask('default', 'test lint cssc');
 
};
 
  • 2012/12/11 - v0.1.0 - Initial release.

Copyright (c) 2012 Étienne Samson for "Mediapart".
Licensed under the Open Source Initiative MIT license.