Comparing initConfig versus mergeConfig

Readme.md

For this example, we're building several packages: core-js, core-css, extras-js, and extras-css.

Using grunt.initConfig, you'll see that our packages are completely intermingled. In order, you'll see core-css, core-js, extras-js, extras-css, options, core-js, extras-js, options, core-css, core-js, extras-css, and extras-js.

Using grunt.mergeConfig, the resulting config object is identical. However, each package comprises its own code block, and are completely modular from other packages. In order, you'll see options, core-js, core-css, extras-js, and extras-css.

Any project that builds more than 1 simple package will greatly benefit from this organizational pattern.
For example, Bootstrap's Gruntfile builds 4 separate packages (bootstrap.js, bootstrap.css, bootstrap-theme.css, docs), jQuery UI builds 3 packages (jquery-ui.js, jquery-ui-i18n.js, jquery-ui.css), and practically every significant project builds multiple packages.

initConfig Gruntfile.js

module.exports = function(grunt) {

	grunt.initConfig({
		less: {
			'core-css': {
				src: 'core/**/*.less', dest: 'dist/core.css'
			}
		},
		concat: {
			'core-js': {
				src: 'core/**/*.js', dest: 'dist/core.js'
			},
			'extras-js': {
				src: 'extras/**/*.js', dest: 'dist/extras.js'
			},
			'extras-css': {
				src: 'extras/**/*.css', dest: 'dist/extras.css'
			}
		},

		uglify: {
			options: {
				report: 'min',
				compress: { loops: true, unused: true, unsafe: true }
			},
			'core-js': {
				src: 'core/**/*.js', dest: 'dist/core.min.js'
			},
			'extras-js': {
				src: 'extras/**/*.js', dest: 'dist/extras.min.js'
			}
		},


		watch: {
			options: { atBegin: true, livereload: true },
			'core-css': {
				src: 'core/**/*.less', tasks: [ 'less:core-css' ]
			},
			'core-js': {
				src: 'core/**/*.js', tasks: [ 'concat:core-js', 'uglify:core-js' ]
			},
			'extras-css': {
				src: 'extras/**/*.css', tasks: [ 'less:extras-css' ]
			},
			'extras-js': {
				src: 'extras/**/*.js', tasks: [ 'concat:extras-js', 'uglify:extras-js' ]
			}
		}
	});


	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-uglify');
};

mergeConfig Gruntfile.js

module.exports = function(grunt) {

	// Default options
	grunt.mergeConfig({
		uglify: {
			options: {
				report: 'min',
				compress: { loops: true, unused: true, unsafe: true }
			}
		},
		watch: {
			options: { atBegin: true, livereload: true }
		}
	});


	// Core css
	grunt.mergeConfig({
		less: {
			'core-css': {
				src: 'core/**/*.less', dest: 'dist/core.css'
			}
		},
		watch: {
			'core-css': {
				src: 'core/**/*.less', tasks: [ 'less:core-css' ]
			}
		}
	});


	// Core JS
	grunt.mergeConfig({
		concat: {
			'core-js': {
				src: 'core/**/*.js', dest: 'dist/core.js'
			}
		},
		uglify: {
			'core-js': {
				src: 'core/**/*.js', dest: 'dist/core.min.js'
			}
		},
		watch: {
			'core-js': {
				src: 'core/**/*.js', tasks: [ 'concat:core-js', 'uglify:core-js' ]
			}
		}
	});


	// Extras CSS
	grunt.mergeConfig({
		concat: {
			'extras-css': {
				src: 'extras/**/*.css', dest: 'dist/extras.css'
			}
		},

		watch: {
			'extras-css': {
				src: 'extras/**/*.css', tasks: [ 'less:extras-css' ]
			}
		}
	});


	// Extras JS
	grunt.mergeConfig({
		concat: {
			'extras-js': {
				src: 'extras/**/*.js', dest: 'dist/extras.js'
			}
		},
		uglify: {
			'extras-js': {
				src: 'extras/**/*.js', dest: 'dist/extras.min.js'
			}
		},
		watch: {
			'extras-js': {
				src: 'extras/**/*.js', tasks: [ 'concat:extras-js', 'uglify:extras-js' ]
			}
		}
	});


	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-uglify');
};