Tuesday, October 16, 2012

First build using grunt.js

Gruntjs is so cool, I should try out this excellent Javscript build tool earlier. It has built-in task, APIs, and pluginable framework (see http://gruntjs.com/ for various plugins). Base off node, gruntjs tries to meet extensive Javascript project build requirements. For details, check out https://github.com/gruntjs. This note describes the steps to create grunt.js build script for one of my Javascript projects.

Precondition:

Node and NPM are installed. Verify its installation and version, refer to below commands

node --version
v0.8.7

npm --version
1.1.49

Purpose:

Minify JS
Minify CSS
Optimize images
Compress HTML
Package build

Steps:

Install grunt globally: 
sudo npm install -g grunt

Install plugins locally:
sudo npm install grunt-smushit (to smush images)
sudo npm install grunt-contrib-copy (to copy files/folder)
sudo npm install grunt-contrib-mincss (to minify CSS files)
sudo npm install grunt-htmlcompressor (to compress HTML)
sudo npm install grunt-contrib-clean (to clean up build target)

grunt built-in task "min" is to minify JS using UglifyJS

Generate project scaffolding
grunt init:gruntfile

Create grunt.js to build project

No comments:

Post a Comment