grunt-asset-monitor

Grunt task to analyse and log simple metrics of static assets to Amazon CloudWatch.

grunt-asset-monitor

Grunt task to analyse and log simple metrics of static assets to Amazon CloudWatch.

This is tasks is used by the Guardian's frontend web project to monitor the performance of their client-side assets. Once the data is in CloudWatch it can then be used to set alert thresholds when certain assets get too large.

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-asset-monitor --save-dev

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

grunt.loadNpmTasks('grunt-asset-monitor');

Type: String Default: /etc/gu/frontend.properties

Location of your properties file containing your AWS api credentials. This should be a raw utf-8 text file with key=value pairs:

aws.access.region=YOUREGION
aws.access.key=YOURKEY
aws.access.secret.key=YOURSECRET

Type: Number Default: 6

Level of GZip compression to use to generate compressed file size output.

Type: Boolean Default: true

Whether to convert file size output to human readable format, example: 245.2 Kb

Basic example of a Grunt config containing the monitor task.

grunt.initConfig({
        assetmonitor: {
            dev: {
                src: [
                    'javascripts/app.js',
                    'stylesheets/global.css'
                ],
                options: {
                    credentials: '/etc/aws.properties'
                }
            }
        },
});
 
grunt.loadNpmTasks('grunt-asset-monitor');
 
grunt.registerTask('default', ['monitor']);

Running monitor against multiple CSS files. All the files specified in the src array will be analyzed by grunt-asset-monitor.

assetmonitor: {
  dist: {
    src: [
      'javascripts/app.js',
      'stylesheets/global.css'
    ]
  }
}

Example of using the options.

assetmonitor: {
    dev: {
        src: [
            'test/*.min.css'
        ],
        options: {
            gzipLevel: 4,
            pretty: true,
            credentials: 'aws.properties'
        }
    }
}

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

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

##Todo

  • Use grunt-css-metrics task to gather additional CSS metrics
  • Use Esprima to gather additional JS metrics
  • Write unit tests