Standard Build Automation Files

Gruntfile.js

module.exports = function(grunt) {

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

        concat: {
            options: {
              separator: ';'
            },
            // 2. Configuration for concatinating files goes here.
            dist: {
                src: [
                    '*.js', // All JS in the libs folder
                    '!Gruntfile.js',
                ],
                dest: 'production.js',
            }
        },
        uglify: {
            options: {
              banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
              mangle: true,
            },
            build: {
                src: 'production.js',
                dest: 'production.min.js'
            }
        },
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'img/uncompressed/',
                    src: ['**/*.{jpg,jpeg,gif,png}'],
                    dest: 'img/compressed/',
                }]
            }
        },
        watch: {
            options: {
                livereload: true,
            },
            scripts: {
                files: ['js/*.js'],
                tasks: ['concat', 'uglify', 'jshint'],
                options: {
                    spawn: false,
                },
            }
        },
        jshint: {
          // define the files to lint
          files: ['gruntfile.js', '*.js'],
          // configure JSHint (documented at http://www.jshint.com/docs/)
          options: {
            globals: {
              jQuery: true,
              console: true,
              module: true
            }
          }
        },
        postcss: {
          options: {
            map: false,
            processors: [
              require('autoprefixer')({browsers: 'last 15 versions'}),
              require('cssnano')()
            ]
          },
          dist: {
            src: 'style.css',
            dest: 'style.min.css',
          }
        },
        htmlmin: {
          dist: {
            options: {
              removeComments: true,
              collapseWhitespace: true
            },
            files: {
              'index.html': 'index.max.html',     // 'destination': 'source'
            }
          },
        },
    });

    // 3. Where we tell Grunt we plan to use this plug-in.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');

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

npm installs

cli:

npm install
npm init
npm install -g grunt-cli
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-imagemin --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-postcss autoprefixer --save-dev
npm install --save-dev grunt-cssnano
npm install grunt-postcss pixrem autoprefixer cssnano
npm install grunt-contrib-htmlmin --save-dev

+ livereload.com/extensions install

TODO

-Setup the file structure like MG2
-Require the npm plugins to install by default
-install css linter
-set up watch to listen on JS, CSS, and IMG, and do it's thing when any of them change.
-make watcher listen on css files.