grunt-cssmetrics

grunt-css-metrics

Grunt task to analyse css files and log simple metrics.

Getting Started

This plugin requires Grunt ~0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-cssmetrics --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-cssmetrics');

You can also use jit-grunt without use an alias.

Options

quiet

Type: Boolean Default: false

Supress any warnings thrown by other max count options.

maxFileSize

Type: Number Default: ∞

Maximum CSS file size in bytes

maxSelectors

Type: Number Default: ∞

Maximum number of selectors within CSS file. (Note: IE selector limit is 4096)

haltOnErrors

Type: Boolean Default: true

If there are any errors, grunt will be stopped (You can set this to false, if you want to).

Examples

Configuration Example

Basic example of a Grunt config containing the css-metrics task.

grunt.initConfig({
    cssmetrics: {
        dev: {
            src: [
                'assets/stylesheets/global.min.css'
            ]
        }
    }
});

grunt.loadNpmTasks('grunt-css-metrics');

grunt.registerTask('default', ['cssmetrics']);

Multiple Files

Running css-metrics against multiple CSS files. All the files specified in the src array will be analyzed by css-metrics.

cssmetrics: {
  dist: {
    src: [
        'assets/stylesheets/global.css',
        'assets/stylesheets/head.css',
        'assets/stylesheets/*.min.css'
    ]
  }
}

Specifying Options

Example of using the options.

cssmetrics: {
    dev: {
        src: [
            'test/*.min.css'
        ],
        options: {
            quiet: false,
            maxSelectors: 4096,
            maxFileSize: 10240000,
            haltOnErrors: false
        }
    }
}

Specifying Files with Glob Pattern

Example of using a glob pattern to target many files that should be analysed by css-metrics. The example below will analyse all the files in the css directory that have an extension of .css.

cssmetrics: {
  dist: {
    src: ['css/*.css']
  }
}

##Todo

• Pipe output to JSON file
• Write unit tests

Release History

0.1.4 (18th Februrary 2015)

0.1.3 (17th February 2015)

0.1.0 (9th June 2013)

• Initial release

Credits

• Original grunt plugin from Peter Hamann grunt-css-metrics. Thank you for doing this!
• @visionmedia for the great css-parse library.
• Original work from @rquinlivan's css-metrics
• Inspiration from my collegue @kaelig