Sample Gruntfile.js

Gruntfile.js

module.exports = function(grunt) {

    /**
     * Load required Grunt tasks.
     */
    require('load-grunt-tasks')(grunt); // This will allow as to execute `loadNPMTask` for tasks with naming pattern of `grunt-*`
    require('time-grunt')(grunt);

    /**
     * The Grunt Configuration
     */
    grunt.initConfig({

        // Connect
        connect: {
            dev: {
                options: {
                    protocol: 'http',
                    hostname: 'localhost',
                    port: 12345,
                    livereload: 12344,
                    open: true, // This tells Grunt to automatically open the 'localhost:12345' in the browser
                    base: 'app' // This is the root folder of website
                }
            }
        },

        // Concurrent
        // 
        // This allows us to execute multiple tasks at the same time.
        concurrent: {
            build: ['uglify:build', 'clean:build']
        },

        // Uglify
        // 
        // This allows our JavaScript to be minified. Useful for production environment
        uglify: {
            build: {
                files: {
                    // Tells Grunt JS to compile all app/scripts to a single file called scripts.js.min in
                    // public_html/scripts folder
                    'public_html/scripts/scripts.js.min': ['app/scripts/**/*.js']
                }
            }
        },

        // Clean
        // 
        // Removes file(s)/directories
        clean: {
            build: []
        },

        // Watch
        // 
        // Watch for any changes in the file/directory
        watch: {
            options: {
                livereload: '<%= connect.dev.options.livereload %>'
            },
            // Watch all HTML, CSS, and JS in the directory (including sub-directories)
            html: {
                files: ['app/**/*.html'],
                tasks: []
            },
            css: {
                files: ['app/styles/**/*.css'],
                tasks: []
            },
            js: {
                files: ['app/scripts/**/*.css'],
                tasks: []
            },
            config: {
                files: ['Gruntfile.js'],
                options: {
                    reload: true
                }
            }
        }

    });


    /**
     * Grunt commands for command line
     * -------------------------------
     */
    // command: grunt
    grunt.registerTask('default', ['connect:dev', 'watch']); // This should not be removed. It is the default command for Grunt.
    
    // command: grunt build
    grunt.registerTask('build', ['concurrent:build']);

};