Gruntfile.js

module.exports = function(grunt) {

    "use strict";

    // -------------------------------------------------------------------------
    // #### Load plugins as needed ####
    // Using a 'just in time' approach -- meaning: only load plugins when they
    // are needed -- this will automatically find, then load, any and all
    // plugins that are needed by the task currently being executed. It will
    // scan the devDependencies object, in package.json, and match any of the
    // following patterns automatically:
    //      - grunt-contrib-[task name]
    //      - grunt-[task name]
    //      - [task name]
    // For any [task name] / [plugin name] pair that can't be found by the above
    // patterns, you can find them manually by adding them as a second argument
    // using the following pattern:
    //      - task name: 'plugin name'
    // We've done that, below, with "replace: 'grunt-text-replace'", as it does
    // not conform to the three patterns that are matched automatically.
    // https://github.com/shootaroo/jit-grunt
    // -------------------------------------------------------------------------

    require('jit-grunt')(grunt, {
        replace: 'grunt-text-replace'
    });

    // -------------------------------------------------------------------------
    // #### Display task execution time ####
    // This module will display elapsed execution time of grunt tasks when they
    // are finished, right on the command line. It's useful for keeping tabs on
    // the performance of your Grunt configuration.
    // https://github.com/sindresorhus/time-grunt
    // -------------------------------------------------------------------------

    require('time-grunt')(grunt);


    // -------------------------------------------------------------------------
    // #### Project configuration ####
    // -------------------------------------------------------------------------

    grunt.initConfig({


        // ---------------------------------------------------------------------
        // #### Variables ####
        // ---------------------------------------------------------------------

        sassPath:       'html/lib/sass/',
        cssPath:        'html/lib/css/',
        jsPath:         'html/lib/js/',
        imgPath:        'html/lib/img/',
        sassFileTypes:  'sass,scss',
        imgFileTypes:   'gif,jpg,jpeg,png',
        docFileTypes:   '.html,.php',


        // ---------------------------------------------------------------------
        // #### Get data from package.json ####
        // Get data from the package.json file and assign it to a pkg variable.
        // ---------------------------------------------------------------------

        pkg: grunt.file.readJSON('package.json'),


        // ---------------------------------------------------------------------
        // #### Build a reusable banner ####
        // A banner variable that can be utilized later via "<%= banner %>".
        // Property names (defined over in package.json) which are preceded by
        // "pkg." will output the corresponding values for those properties.
        // ---------------------------------------------------------------------

        banner: '/*!\n' +
                ' * <%= pkg.name %> | version: <%= pkg.version %> | updated: <%= grunt.template.today("yyyy-mm-dd @ h:MM:ss TT") %>\n' +
                ' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.owner.name %>\n' +
                ' */\n',


        // ---------------------------------------------------------------------
        // #### Task configuration ####
        // ---------------------------------------------------------------------

        // Task: Sass compiling.
        // https://github.com/gruntjs/grunt-contrib-sass
        sass: {
            // Task-wide options.
            options: {},
            // Target: development.
            dev: {
                // Target-specific options.
                options: {
                    style: "expanded",
                    lineNumbers: true
                },
                // Source file(s), in the order we want to compile them.
                src: '<%= sassPath %>all.{<%= sassFileTypes %>}',
                // Destination file.
                dest: '<%= cssPath %>all.css'
            },
            // Target: production.
            prod: {
                // Target-specific options.
                options: {
                    style: "compressed",
                    // Utilize the banner variable defined above.
                    banner: '<%= banner %>'
                },
                // Source file(s), in the order we want to compile them.
                src: '<%= sassPath %>all.{<%= sassFileTypes %>}',
                // Destination file.
                dest: '<%= cssPath %>all.min.css'
            }
        },

        // Task: JavaScript hinting.
        // https://github.com/gruntjs/grunt-contrib-jshint
        jshint: {
            // Task-wide options.
            options: {},
            // Target: all.
            all: {
                // Target-specific options.
                options: {},
                // Source file(s), in the order we want to hint them.
                src: [
                    'Gruntfile.js',
                    '<%= jsPath %>*.js',
                    '!<%= jsPath %>*.min.js', // ...but not minified files.
                    '!<%= jsPath %>all.js' // ...but not the concatenated file.
                ]
            }
        },

        // Task: JavaScript file concatenation.
        // https://github.com/gruntjs/grunt-contrib-concat
        concat: {
            // Task-wide options.
            options: {},
            // Target: all.
            all: {
                // Target-specific options.
                options: {
                    // Separate each concatenated script with a semicolon.
                    separator: ';'
                },
                // Source file(s), in the order we want to concatenate them.
                src: [
                    '<%= jsPath %>vendor/jquery-1.10.2.js',
                    '<%= jsPath %>plugins/*.js',
                    '<%= jsPath %>*.js',
                    '!<%= jsPath %>*.min.js', // ...but not minified files.
                    '!<%= jsPath %>all.js' // ...but not the concatenated file.
                ],
                // Destination file.
                dest: '<%= jsPath %>all.js',
                // Warn if a given file is missing or invalid.
                nonull: true
            }
        },

        // Task: JavaScript minification.
        // https://github.com/gruntjs/grunt-contrib-uglify
        uglify: {
            // Task-wide options.
            options: {},
            // Target: all.
            all: {
                // Target-specific options.
                options: {
                    // Utilize the banner variable defined above.
                    banner: '<%= banner %>',
                    // Report the original vs. minified file-size.
                    report: 'min'
                },
                // Source file(s), in the order we want to minify them.
                src: '<%= jsPath %>all.js',
                // Destination file.
                dest: '<%= jsPath %>all.min.js'
            }
        },

        // Task: image minification.
        // https://github.com/gruntjs/grunt-contrib-imagemin
        imagemin: {
            // Task-wide options.
            options: {},
            // Target: all.
            all: {
                // Target-specific options.
                options: {},
                // Files to minify.
                files: [{
                    // Allow for a dynamically-built file-list.
                    expand: true,
                    // The directory to start this task within.
                    cwd: '<%= imgPath %>',
                    // Relative to the path defined in "cwd", the sub-
                    // directories and file type(s) to work on.
                    src: ['**/*.{<%= imgFileTypes %>}'],
                    // Destination location.
                    dest: '<%= imgPath %>'
                }]
            }
        },

        // Task: find and replace things in the project.
        // https://github.com/yoniholmes/grunt-text-replace
        replace: {
            // Target: remove the Livereload script.
            removeLivereload: {
                // Scan all document file types inside of html/.
                src: 'html/**/*{<%= docFileTypes %>}',
                // Replacement(s) to make.
                replacements: [{
                    // From: The full script element needed for Livereload to
                    // function, plus a line-return.
                    from: /<script src="\/\/localhost:35729\/livereload\.js"><\/script>\n/m,
                    // To: Nothing.
                    to: ''
                }],
                // Overwrite each file.
                overwrite: true
            },
            // Target: add the Livereload script.
            addLivereload: {
                // Scan all document file types inside of html/.
                src: 'html/**/*{<%= docFileTypes %>}',
                // Replacement(s) to make.
                replacements: [{
                    // From: a closing body tag.
                    from: /<\/body>/,
                    // To: The full script element needed for Livereload to
                    // function, a line-return, and the closing body tag.
                    to: '<script src="//localhost:35729/livereload.js"></script>\n</body>'
                }],
                // Overwrite each file.
                overwrite: true
            },
            // Target: replace production-specific css file name with
            // development-specific css file name.
            devCssFile: {
                // Scan all document file types inside of html/.
                src: 'html/**/*{<%= docFileTypes %>}',
                // Replacement(s) to make.
                replacements: [{
                    // From: "all.min.css".
                    from: /all\.min\.css/,
                    // To: "all.css".
                    to: 'all.css'
                }],
                // Overwrite each file.
                overwrite: true
            },
            // Target: replace development-specific css file name with
            // production-specific css file name.
            prodCssFile: {
                // Scan all document file types inside of html/.
                src: 'html/**/*{<%= docFileTypes %>}',
                // Replacement(s) to make.
                replacements: [{
                    // From: "all.css".
                    from: /all\.css/,
                    // To: "all.min.css".
                    to: 'all.min.css'
                }],
                // Overwrite each file.
                overwrite: true
            },
            // Target: replace production-specific js file name with
            // development-specific js file name.
            devJsFile: {
                // Scan all document file types inside of html/.
                src: 'html/**/*{<%= docFileTypes %>}',
                // Replacement(s) to make.
                replacements: [{
                    // From: "all.min.js".
                    from: /all\.min\.js/,
                    // To: "all.js".
                    to: 'all.js'
                }],
                // Overwrite each file.
                overwrite: true
            },
            // Target: replace development-specific js file name with
            // production-specific js file name.
            prodJsFile: {
                // Scan all document file types inside of html/.
                src: 'html/**/*{<%= docFileTypes %>}',
                // Replacement(s) to make.
                replacements: [{
                    // From: "all.js".
                    from: /all\.js/,
                    // To: "all.min.js".
                    to: 'all.min.js'
                }],
                // Overwrite each file.
                overwrite: true
            },
            // Target: bust cache. This target assumes "?cb=[any number here]"
            // has been appended to any file-path you'd like to cache-bust. For
            // example, css files, js files, image files, etc.:
            // <link rel="stylesheet" href="/lib/css/all.css?cb=1" />
            // <script src="/lib/js/all.min.js?cb=1"></script>
            // <img src="/lib/img/photo.jpg?cb=1" alt="A photo" />
            cacheBust: {
                // Scan all document file types inside of html/.
                src: 'html/**/*{<%= docFileTypes %>}',
                // Replacement(s) to make.
                replacements: [{
                    // From: "?cb=[any number here]".
                    from: /\?cb=[0-9]*/g,
                    // To: "?cb=[the current Unix epoch time]"
                    to: function() {
                        var uid = new Date().valueOf();
                        return '?cb=' + uid;
                    }
                }],
                // Overwrite each file.
                overwrite: true
            }
        },

        // Task: aside from creating notifications when something fails (which
        // is this task's permanent/default behavior), also create the following
        // notifications for these custom, non-failure events. The targets below
        // are utilized by requesting them via targets found in the watch task.
        // https://github.com/dylang/grunt-notify
        notify: {
            // Target: Sass.
            sass: {
                options: {
                    title: 'CSS',
                    message: 'Compiled successfully.'
                }
            },
            // Target: JavaScript.
            js: {
                options: {
                    title: 'JavaScript',
                    message: 'Hinted and concatenated successfully.'
                }
            },
            // Target: ready for production.
            goProd: {
                options: {
                    title: 'Ready for Production',
                    message: 'Ship it!'
                }
            },
            // Target: ready for development.
            goDev: {
                options: {
                    title: 'Ready for Development',
                    message: 'Make it better!'
                }
            }
        },

        // Task: when something changes, run specific task(s).
        // https://github.com/gruntjs/grunt-contrib-watch
        watch: {
            // Task-wide options.
            options: {},
            // Target: Sass.
            sass: {
                // Target-specific options.
                options: {},
                // Watch all sassFileTypes files inside of sassPath.
                files: '<%= sassPath %>**/*.{<%= sassFileTypes %>}',
                // Task(s) to run.
                tasks: [
                    'newer:sass:dev',
                    'notify:sass'
                ]
            },
            // Target: css.
            css: {
                // Target-specific options.
                options: {
                    // Utilize Livereload.
                    livereload: true
                },
                // Watch all .css files inside of cssPath.
                files: '<%= cssPath %>*.css'
            },
            // Target: JavaScript.
            js: {
                // Target-specific options.
                options: {
                    // Utilize Livereload.
                    livereload: true
                },
                // Watch all JavaScript files inside of jsPath.
                files: [
                    '<%= jsPath %>*.js',
                    '!<%= jsPath %>*.min.js', // ...but not minified files.
                    '!<%= jsPath %>all.js' // ...but not the concatenated file.
                ],
                // Task(s) to run.
                tasks: [
                    'newer:jshint:all',
                    'concat:all',
                    'notify:js'
                ]
            },
            // Target: documents.
            docs: {
                // Target-specific options.
                options: {
                    // Utilize Livereload.
                    livereload: true
                },
                // Watch all docFileTypes inside of html/.
                files: 'html/**/*{<%= docFileTypes %>}'
            }
        }

    });


    // -------------------------------------------------------------------------
    // #### Define task aliases that run multiple tasks ####
    // On the command-line, type "grunt [alias]" without the square brackets or
    // double-quotes, and press return. The format is as follows:
    // grunt.registerTask('alias', [
    //     'task1',
    //     'task2:targetName',
    //     'task3'
    // ]);
    // -------------------------------------------------------------------------

    // #### Task alias: "default" ####
    // Task(s) to run when typing only "grunt" in the console.
    grunt.registerTask('default', [
        'watch'
    ]);

    // #### Task alias: "goProd" ####
    // Tasks(s) to run when it's time to convert things from development mode to
    // production mode.
    grunt.registerTask('goProd', [
        'sass:prod',
        'jshint:all',
        'concat:all',
        'uglify:all',
        'imagemin:all',
        'replace:removeLivereload',
        'replace:prodCssFile',
        'replace:prodJsFile',
        'replace:cacheBust',
        'notify:goProd'
    ]);

    // #### Task alias: "goDev" ####
    // Tasks(s) to run when it's time to convert things from production mode to
    // development mode.
    grunt.registerTask('goDev', [
        'replace:addLivereload',
        'replace:devCssFile',
        'replace:devJsFile',
        'notify:goDev'
    ]);

};

package.json

{
    "name": "xyz-inc-marketing",
    "description": "A marketing website for XYZ, Inc.",
    "version": "0.1.0",
    "author": {
        "name": "The Outfit, Inc.",
        "url": "http://fromtheoutfit.com",
        "email": "hello@fromtheoutfit.com"
    },
    "owner": {
        "name": "XYZ, Inc.",
        "url": "http://xyzinc.com",
        "email": "hello@xyzinc.com"
    },
    "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-concat": "~0.3.0",
        "grunt-contrib-jshint": "~0.6.5",
        "grunt-contrib-sass": "~0.5.1",
        "grunt-contrib-uglify": "~0.2.7",
        "grunt-contrib-watch": "~0.5.3",
        "grunt-contrib-imagemin": "~0.3.0",
        "grunt-text-replace": "~0.3.11",
        "grunt-notify": "~0.2.17",
        "grunt-newer": "~0.6.1",
        "jit-grunt": "~0.2.1",
        "time-grunt": "~0.2.9"
    }
}