Install NodeJS - needed to run Grunt

Install grunt CLI

$ npm install grunt-cli -g

Setup project to use grunt

1. CD into your project directory
2. Create a package.json file:

   {
     "name"    : "project-name",
     "version" : "1.0.0"
   }
               

3. Install grunt in project

   $ npm install grunt --save-dev

Install grunt plugins

$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-contrib-cssmin --save-dev
$ npm install grunt-htmlcompressor --save-dev
$ npm install grunt-contrib-sass   --save-dev
$ npm install grunt-contrib-watch  --save-dev
    

Note the package.json looks something like this

{
    "name"            : "project-name",
    "version"         : "1.0.0",
    "devDependencies" : {
        "grunt"                : "~0.4.2",
        "grunt-contrib-uglify" : "~0.2.7",
        "grunt-contrib-cssmin" : "~0.7.0",
        "grunt-htmlcompressor" : "~0.1.10",
        "grunt-contrib-sass"   : "~0.6.0",
        "grunt-contrib-watch"  : "~0.5.3"
    }
}
    

Create a file called Gruntfile.js

module.exports = function(grunt) {

    // 1. All configuration goes here
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),

        // 2. Configure Uglify
        uglify : {
            options   : {
                banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            my_target : {
                files : {
                    //'build/bad.min.js' : ['src/js/bad.js'],
                    //'build/good.min.js' : ['src/js/good.js']
                    'build/output.min.js' : ['src/js/*.js']
                }
            }
        }

    });

    // 3. Tell Grunt what plugins we want to use
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-htmlcompressor');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
    grunt.registerTask('default', ['uglify']);
};
    

Run grunt

$ grunt

This would have run the 'default' task

CssMin plugin

Add the following configuration into the grunt config object.

cssmin         : {
    add_banner : {
        options : {
            banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        files   : {
            'build/output.css' : ['src/css/*.css']
        }
    }
}
    

Change the default task to look like this:

grunt.registerTask('default', ['uglify', 'cssmin']);

HtmlCompressor plugin

Add the following configuration into the grunt config object.

htmlcompressor : {
    compile : {
        files   : {
            'build/index.html' : 'src/index.html'
        },
        options : {
            type                 : 'html',
            preserveServerScript : true
        }
    }
}
    

Change the default task to look like this:

grunt.registerTask('default', ['uglify', 'cssmin', 'htmlcompressor']);

SASS compiler

Add the following configuration into the grunt config object.

sass: {
    dist: {
        files: {
            'src/css/main.css': 'src/sass/main.scss'
        }
    }
}
    

Watch plugin

Watch files and run the target tasks when the files change.

watch: {
    files: "src/sass/*",
    tasks: ["sass"]
}