Grunt Setup

This blog assumes you're familiar or already have Bower and RequireJS setup, if you're new to those, please refer to my other blogs: Bower Setup in SilverStripe and RequireJS Setup in SilverStripe.  Grunt is a JavaScript task runner that basically watches your JS code changes and will help in minification, checking validation (linting), compiling and unit testing if you have those in place.

  1. Install the grunt command line package.

    npm install -g grunt-cli
  2. Install grunt package with npm inside your theme js directory (themes/themename/javascript).
    This will install grunt in the node_modules directory.

    npm install grunt
  3. Create your Grunt manifest and save in package.json.
    This will contain project dependencies.

    {
    	"name": "printcost",
    	"version": "0.1.0",
    	"devDependencies": {
    	}
    }
  4. Create the Grunt run script and save in Gruntfile.js
    Note this file will be run by the Grunt task runner.

    module.exports = function(grunt) {
    
    	// Project configuration.
    	grunt.initConfig({
    		pkg: grunt.file.readJSON('package.json'),
    		uglify: {
    			options: {
    				banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    			},
    			build: {
    				src: 'src/<%= pkg.name %>.js',
    				dest: 'build/<%= pkg.name %>.min.js'
    			}
    		}
    	});
    
    	// Load the plugin that provides the "uglify" task.
    	grunt.loadNpmTasks('grunt-contrib-uglify');
    
    	// Default task(s).
    	grunt.registerTask('default', ['uglify']);
    
    };
  5. Install key Grunt plugins
    You may search other Grunt packages in the Grunt Plugins section.
    Remember to include the --save-dev flag to ensure the package.json file gets updated with the dependency.

    npm install grunt-contrib-uglify --save-dev
    npm install grunt-contrib-jshint --save-dev
    npm install grunt-contrib-qunit --save-dev
    npm install grunt-contrib-watch --save-dev
    npm install grunt-contrib-concat --save-dev
    npm install grunt-contrib-less --save-dev
    npm install grunt-contrib-sass --save-dev
  6. Git ignore node_modules directory
    This is where grunt downloads the plugins
    themes/themename/javascript/node_modules
  7. Run Grunt watch task

    grunt watch
  8. Example Gruntfile settings
    The following example shows you how to load existing modules and configure them.

    module.exports = function(grunt) {
    	grunt.initConfig({
    		pkg: grunt.file.readJSON('package.json'),
    		concat: {
    			options: {
    				separator: ';'
    			},
    			dist: {
    				src: ['src/**/*.js'],
    				dest: 'dist/<%= pkg.name %>.js'
    			}
    		},
    		uglify: {
    			options: {
    				banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
    			},
    			dist: {
    				files: {
    					'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    				}
    			}
    		},
    		qunit: {
    			files: ['test/**/*.html']
    		},
    		jshint: {
    			files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
    			options: {
    				// options here to override JSHint defaults
    				globals: {
    					jQuery: true,
    					console: true,
    					module: true,
    					document: true
    				}
    			}
    		},
    		watch: {
    			files: ['<%= jshint.files %>'],
    			tasks: ['jshint', 'qunit']
    		}
    	});
    	grunt.loadNpmTasks('grunt-contrib-uglify');
    	grunt.loadNpmTasks('grunt-contrib-jshint');
    	grunt.loadNpmTasks('grunt-contrib-qunit');
    	grunt.loadNpmTasks('grunt-contrib-watch');
    	grunt.loadNpmTasks('grunt-contrib-concat');
    	grunt.loadNpmTasks('grunt-contrib-less');
    	grunt.registerTask('test', ['jshint', 'qunit']);
    	grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
    };
    



References
http://gruntjs.com/
http://culttt.com/2013/11/18/setting-sass-grunt/