Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

CSS and JS minifier that respects source modification

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 tasks Added `frontend-update` task October 15, 2013
Octocat-spinner-32 test
Octocat-spinner-32 .gitignore
Octocat-spinner-32 .npmignore
Octocat-spinner-32 Gruntfile.js
Octocat-spinner-32 LICENSE-MIT.txt
Octocat-spinner-32 README.md
Octocat-spinner-32 package.json
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 @import inlining and url() rewriting.

Unlike basic minifiers, this task generates a hidden catalog file (.build-catalog.json) that stores state, last compilation date and checksum 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 checksum hash) can be used to modify URLs to minified files for effective caching.

Usage

This plugin provides frontend-js, frontend-css and frontend-index multi-tasks. Global config can be defined in frontend key. All tasks are file-based. Here’s example Gruntfile.js:

module.exports = function(grunt) {
    grunt.initConfig({
        // Global config for each frontend-* task. These values can
        // be overridden in `options` key of each task
        frontent: {
            // 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',

           // A scheme for creating versioned URLs. Versioned URLs
           // can are stored in catalog and used to rewrite paths 
           // for `url()` values of CSS.
           // Can be a string or a function.
           // A string is a template with the following placeholders:
           // * version: version tag (in most cases it’s CRC32 of file)
           // * url: absolute URL, e.g. `/path/to/file.css`
           // * dirname: absolute path to file’s directory, e.g. `/path/to/`
           // * basename: file’s full name, e.g. `file.css`
           // * filename: name of file, e.g. `file`
           // * ext: file’s extension, e.g. `css`
           rewriteScheme: '/-/<%= version %><%= url %>',

           // function to post-process file’s content before it will be
           // saved to disk
           postProcess: function(content, fileInfo) {}
        },

        // Task for concatenating and minifying JS files
        'frontend-js': {
            main: {
                // task options
                options: {
                    // Minify JS
                    minify: true,

                    // config for UglifyJS
                    uglify: {}
                },

                files: {
                    'out/js/f.js': [
                        'test/js/file1.js',
                        'test/js/file2.js'
                    ]
                }
            }
        },

        // Task for concatenating and minifying CSS files
        'frontend-css': {
            main: {
                options: {
                    // inline @imports
                    inline: true,

                    // rewrite all url() to versioned ones.
                    // the `rewriteScheme` is used to create versioned URL
                    rewriteUrl: true,

                    // minify CSS
                    minify: true
                },
                files: [
                    {src: 'test/css/*.css', dest: 'out/css'}
                ]
            }
        },

        // Task fo indexing files and storing its’ version hash
        // and verioned URL in catalog. Useful for fast lookups of 
        // versioned files
        'frontend-index': {
            main: {
                files: [{src: 'test/css/**/*.{css,jpg,png}'}]
            }
        }
    });
};

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

Something went wrong with that request. Please try again.