Skip to content
CSS and JS minifier that respects source modification
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
tasks
test
.gitignore
.npmignore
Gruntfile.js
LICENSE-MIT.txt
README.md
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.

You can’t perform that action at this time.