Grunt

Doco

http://gruntjs.com/

Installation

npm install -g grunt-cli

This will put the grunt command in your system path, allowing it to be run from any directory.

Note that installing grunt-cli does not install the Grunt task runner! The job of the Grunt CLI is simple: run the version of Grunt which has been installed next to a Gruntfile. This allows multiple versions of Grunt to be installed on the same machine simultaneously.

Spinning Up a New Site

You will need to do this if installing packages such as Grunt.

  1. Install the grunt-cli globally if that has not already been done.
  2. Create npm’s package.json file if it does not already exists.
    npm init
  3. Install Grunt and update the package.json file.
    npm install grunt --save-dev
  4. Add some Grunt packages such as:
    npm install --save-dev grunt-babel
    npm install --save-dev grunt-contrib-jshint
    npm install --save-dev grunt-contrib-concat
    npm install --save-dev grunt-contrib-uglify
    npm install --save-dev grunt-contrib-sass
    npm install --save-dev grunt-contrib-watch
    npm install --save-dev grunt-contrib-connect
    npm install --save-dev grunt-wiredep
    npm install --save-dev grunt-bower-concat
  5. Understand that Grunt needs package.json and Gruntfile.js files located in the same directory. You have the first one, but now you need to build the Gruntfile.js file.
    1. This is a manual process. Create an empty file called Gruntfile.js and enter the stub info:
      module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        //Task specific configurations
        xxx: { //task name
			job1: { } //job name
		},
        yyy: { },
		zzz: { }
    });

    // Load the plugins
	grunt.loadNpmTasks('xxx');
	grunt.loadNpmTasks('yyy');
	grunt.loadNpmTasks('zzz');

    // Define the default tasks
    grunt.registerTask('default', ['connect','watch']);
};
    2. Enter your site’s configuration (grunt.initConfig) properties. This will be the most tedious part of the process.

Grunt Plugins

When searching for plugins, use the search on the Grunt page, not the npm search page.

grunt-contrib-concat

With the code below, we have two jobs defined (dist and prod). It will build to dev and to prod. Also, if the options property is defined inside the jobs, then those options only apply to that job.

concat: {
	options: {
		separator: '\n\n//-------------------------------------\n'
	},
	dist: {
		src: ['source/js/*.js'],
		dest: 'builds/dev/js/script.js'
	}
	prod: {
		src: ['source/js/*.js'],
		dest: 'builds/prod/js/script.js'
	}
}

grunt.loadNpmTasks('grunt-contrib-concat');

grunt-contrib-uglify

grunt-contrib-sass

sass: {
	options: {
		style: 'compact'
	},
	files: { //dest:source
		'builds/prod/css/main.css': 'components/scss/main.scss'
	}	
}

grunt.loadNpmTasks('grunt-contrib-sass');

grunt-contrib-watch

watch: {
	options: {
		spawn: false, //makes it run faster
		livereload: true
	},
	scripts: {
		files['builds/dev/**/*.html',
			'components/js/**/*.js',
			'components/sass/**/*.scss'],
		tasks: ['concat', 'sass']
	}
}

grunt.loadNpmTasks('grunt-contrib-watch');

grunt-contrib-connect

This plugin assists with Watch’s LiveReload feature.

connect: {
	server: {
		options: {
			hostname: 'localhost',
			port: 3000,
			base: 'builds/dev/',
			livereload: true
		}
	}
}

grunt.loadNpmTasks('grunt-contrib-connect);

grunt-wiredep

This plugin assists with Watch’s LiveReload feature.

wiredep: {
	task: {
		src: ['builds/dev/**/*.html']
	}
}

grunt.loadNpmTasks('grunt-wiredep');

To make this work, you will need to modify the html files by putting in special comments that tell Grunt to insert 

<head>
	<!-- bower:css -->
	<!-- endbower -->
</head>
<body>
	your page
	<!-- bower:js -->
	<!-- endbower -->
</body>

CSS Plugins

Grunt Recess to enforce a style guide

Grunt CSS Lint to improve speed

Grunt PostCSS to minify, autoprefix, fallbacks for rem, and more