Grunt Boilerplate


This post takes you through the process of joining and minifying JavaScript and CSS files for a web project. To get started navigate to the project directory and run the following commands to install node package manager, grunt and its required modules, you may need to run some of them as administrator (sudo):

//$ npm install

//$ npm install -g grunt-cli
//$ npm install grunt-contrib-concat --save-dev
//$ npm install grunt-contrib-uglify --save-dev
//$ npm install grunt-contrib-cssmin --save-dev 

This should create two files in the root of the directory package.json and Gruntfile.js. You’ll notice that package.js will already be populated, the only thing you should really need to change here is the “name” property which refers to the project you are building. If you install new grunt modules through the terminal they will automatically be added here.

{
	"name": "carmichaelize",
	"version": "0.1.0",
	"devDependencies": {
		"grunt": "^0.4.5",
		"grunt-contrib-concat": "^0.5.0",
		"grunt-contrib-cssmin": "^0.10.0",
		"grunt-contrib-uglify": "^0.6.0"
	}
}

Gruntfile.js, require a little more work. This is where all the concatenations and minifications are configured and run. This will likely be configured on a per project basis as different projects will have different JS and CSS assets. A typical Gruntfile.js may look like:

When concatenating assets you can use a wildcard to specify all the files from a directory but that may cause issues if you need assets to load in a certain order, so its better to specify the files in order. To compile you then need to run “grunt” in the root of the project.

Other Resources