grunt-cssrazor

Produces cleaned CSS based on actually used DOM

grunt-cssrazor

Removes unused CSS by actually analyzing the pages that consume the CSS using Phantom

Install this grunt plugin by running this command in root of your project,

npm install grunt-cssrazor

Then add this line to your project's Gruntfile.js.

grunt.loadNpmTasks('grunt-cssrazor');

Configure task in Gruntfile.js,

cssrazor: {
  release: {
    options: {
      urls: [
        'http://www.changer.nl/',
        'http://www.changer.nl/team.html',
        'http://www.changer.nl/products.html',
        'http://www.changer.nl/contact.html',
        'http://www.changer.nl/portfolio.html',
        'http://www.changer.nl/legal/'
      ],
      input: 'app.css',
      output: 'release.css'
    }
  }
}

This instructs cssrazor to process source file app.css and store processed file into release.css.

Make sure you specify all unique url's that could possibly consume your CSS to make sure you don't remove used rules.

It's advisable to run grunt-contrib-cssmin after this task to make sure your CSS is optimized for production.

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

  • 12/3/13 - v0.1.0 - Initial release.

Copyright (c) 2013 Ruben Stolk Licensed under the MIT license.