grunt-css-metrics

Grunt task to analyse css files and log simple metrics.

grunt-css-metrics

Grunt task to analyse css files and log simple metrics.

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-css-metrics --save-dev

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

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

Type: Boolean Default: false

Supress any warnings thrown by other max count options.

Type: Number Default:

Maximum CSS file size in bytes

Type: Number Default:

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

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']);

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'
    ]
  }
}

Example of using the options.

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

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
  • Initial release