README.md

A Grunt.js task that compiles CSS and JS files with respect of file modification date. For JS, it uses built-in UglifyJS minifier, for CSS — Yandex’s CSSO with automatic @imported files inclusion.

Unlike basic minifiers, this task generates a hidden catalog file (.build-catalog.json) that stores state, last compilation date and md5 hashes of minified files. Every time you call frontend task, it will look into this catalog and check if the state of files being minified was changed. If not, the file will not be re-minified which saves CPU time and modification date. This date (or md5 hash) can be used to modify URLs to minified files for effective caching.

Usage

This plugin provides frontend task. Here’s example grunt.js file:

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        // Configure 'frontend' task
        frontendConfig: {
            // Force file minification even if they were not modified
            force: false,

            // Path to project sources root folder.
            // It is used to resolve absolute paths in CSS imports,
            // for example: @import "/css/file.css" will be resolved 
            // to './src/files/css/file.css'
            srcWebroot: './src/files',

            // Destination root folder.
            // Used to update minified files paths in catalog,
            // e.g. instead of storing '/Users/foo/project/out/css/minified.css' path, 
            // task will cut-out path to webroot and store '/css/minified.css' instead
            webroot: './out'
        },

        frontend: {
            // CSS subtask: find all CSS files in `src` folder and 
            // store minified version in `dest` folder
            css: {
                src: './src/css',
                dest: './out/css'
            },
            
            // JS subtask: works pretty much the same as default 
            // `min` task:
            // https://github.com/gruntjs/grunt/blob/master/docs/task_min.md
            js: {
                './out/js/f1.js': [
                    './src/js/fileA.js',
                    './src/js/fileB.js'
                ],

                './out/js/f2.js': [
                    './src/js/fileC.js',
                    './src/js/fileD.js'
                ]
            }
        }
    });
};

This task can be used together with docpad-plugin-frontend to automatically generate cache-effective URLs to assets for DocPad-generated web-site.