Gruntfile.js fully featured skeleton / boilerplate

Readme.md

Gruntfile.js boilerplate

Grunt is sweet but configuring it takes way too much time. I am sharing the same template I have been using on most of my web projects now.

It ships most of the required feature for a web project :

• Less compilation
• CSS minification
• JS minification
• Icon sprites
• Watchers
• LiveReload 2
• System notifications when the CSS/JS compiler is executed

This is intended as a quick template to copy/paste into a project and to trim when required.

Gruntfile.js

'use strict';
module.exports = function (grunt) {
    grunt.initConfig({
        jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            all: [
                'js/*.js'
            ]
        },
        less: {
            dist: {
                files: {
                    'dist/styles.min.css': [
                        'less/styles.less'
                    ]
                },
                options: {
                    compress: true,
                    optimization: 0,
                    //sourceMap: true,
                    //sourceMapFilename: 'dest.css.map',
                    //sourceMapRootpath: 'path/.../dist'
                }
            }
        },
        cssmin: {
            target: {
                files: {
                    'dist/styles.min.css': ['dist/styles.min.css']
                }
            }
        },
        sprite:{
            all: {
                src: 'img/icon/*.png',
                dest: 'img/sprites.png',
                destCss: 'dist/sprites.css'
            }
        },
        uglify: {
            dist: {
                files: {
                    'dist/scripts.min.js': [
                        //'bower_components/bootstrap/dist/js/bootstrap.js',
                        'bower_components/modernizer/modernizr.js',
                        'bower_components/matchHeight/jquery.matchHeight.js',
                        'js/*.js'
                    ]
                },
                options: {
                    sourceMap: 'dist/scripts.min.js.map',
                    sourceMappingURL: 'path/.../dist/'
                }
            }
        },
        notify: {
            less: {
                options: {
                    title: 'Task Complete',
                    message: 'LESS'
                }
            },
            js: {
                options: {
                    title: 'Task complete',
                    message: 'Uglify'
                }
            }
        },
        watch: {
            less: {
                files: [
                    'bower_components/bootstrap/less/*.less',
                    'bower_components/font-awesome/less/*.less',
                    'less/*.less'
                ],
                tasks: ['css', 'notify:less']
            },
            js: {
                files: [
                    '<%= jshint.all %>'
                ],
                tasks: ['js', 'notify:js']
            },
            sprite: {
                files: ['img/icon/*.png'],
                tasks: ['css', 'notify:less']
            },
            livereload: {
                options: {
                    livereload: true
                },
                files: [
                    'dist/*.css',
                    'dist/*.js',
                    '*.php'
                ]
            },
            configFiles: {
                files: ['Gruntfile.js'],
                options: {
                    reload: true
                }
            }
        },
        clean: {
            dist: [
                'dist'
            ],
            temp: [
                // cleans temporary files in the dist/ folder
                'dist/*~',
                '!dist/*.min.*'
            ]
        }
    });

    // Load tasks
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-notify');
    grunt.loadNpmTasks('grunt-spritesmith');

    // Register tasks
    grunt.registerTask('css', [
        'sprite',
        'less',
        'cssmin',
        'clean:temp'
    ]);

    grunt.registerTask('js', [
        'uglify',
        'clean:temp'
    ]);

    grunt.registerTask('default', [
        'clean',
        'css',
        'js'
    ]);

    grunt.registerTask('build', [
        'clean:dist',
        'default'
    ]);

    grunt.registerTask('dev', [
        'watch'
    ]);
};

package.json

{
  "name": "project_x",
  "version": "1.0.0",
  "author": "Clement Debiaune <[email protected]>",
  "homepage": "http://debiaune.me",
  "engines": {
    "node": ">= 0.10.0"
  },
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-cssmin": "^0.11.0",
    "grunt-contrib-jshint": "~0.6.4",
    "grunt-contrib-less": "~0.8.1",
    "grunt-contrib-uglify": "~0.2.4",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-grunticon": "^1.2.9",
    "grunt-notify": "^0.4.1",
    "grunt-spritesmith": "^3.5.0"
  }
}