Web Development Automation - Getting Started With Grunt Tutorial

This is the second part in my series on Web Development Automation. In this post, we are going to move from using Apache Ant to perform our automation tasks to using Grunt. The tasks that we want to perform are:

• Combine all of the CSS library source files into libs.css
• Compile our application’s LESS to CSS
• Minify and combine the application CSS into app.css
• Combine all of the JavaScript library source files into libs.js
• Lint our application’s CoffeeScript source files
• Compile CoffeeScript to JS
• Combine and uglify all application JS files into single app.js file\

You might notice that this list is a bit longer than my initial goal of simply minifying the JavaScript and CSS source files. I am now using CoffeeScript and LESS, as well as combining all the libraries that I am using in my project and uglifying my JS.

By combining all of the library source code into a single CSS and JS file, I am reducing the number of HTTP requests that my user’s browser must perform. For my project, I am using various libraries to add functionality such as a time and date picker, slider, and security and cryptography utilities. Using a concat plugin for Grunt, we can combine all of the CSS and JS files into libs.css and libs.js.

Before we dive into Grunt, however, we have to mention Node.js and the node package manager (npm). The reason why we have to mention Node is because Grunt is a Node application, so as you can expect, we must have Node.js installed first. Here’s what we need to do:

• Install Node.js
• Install npm
• Create package.json
• Install Grunt and required dependencies

If you already have Node.js and npm installed, just skip ahead.

Installing Node.js is simple. imply visit the download page, grab the right file for your system, and run the installer. Next, we need to install npm using Node. Fire up your Terminal application on your Mac via Applications > Utilities > Terminal or your Command prompt on Windows, and run the following command. Note, I am on a mac, so all of my examples will be based on the mac shell.

$ curl http://npmjs.org/install.sh | sh

We now have Node.js and npm installed. Let’s get started building our package.json file. The package.json file is similar to our build.xml file for Apache Ant, but it is written in JavaScript Object Notation (JSON). Here is what my simple package.json file looks like.

{
  "name": "MyProject",
  "version": "0.0.1",
  "author": {
    "name": "MyProject",
    "email": "someone@somewhere.com"
  },
  "dependencies": {
    "grunt-cli": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-less": "latest",
    "grunt-contrib-coffee": "latest",
    "grunt-coffeelint": "latest",
    "grunt-concat-css": "latest",
    "grunt-contrib-cssmin": "latest"
  }
}

You can copy/paste the contents above into your package.json file, or you can run npm init to create your package.json file interactively on the command line. Here, I am simply providing some details about my project, along with a list of plugins, or dependencies for your Gruntfile. You can also specify the version of each plugin. I have chosen to always use the latest version. I am using these plugins to compile, lint, minify and concat my source files.

• grunt-cli is the command-line interface for Grunt
• grunt-contrib-concat will concat files together into a single file
• grunt-contrib-uglify will minify JavaScript files using the UglifyJS project
• grunt-contrib-lesswill compile LESS files into CSS
• grunt-contrib-coffee will compile CoffeeScript files into JavaScript
• grunt-coffeelint will lint (clean up and verify) your CoffeeScript source files using the CoffeeLink project
• grunt-concat-css will concat CSS files together
• grunt-contrib-cssmin will minify your CSS files using the clean-css project

I have linked to each project listed on the npmjs.org website, as you need to be familiar with the various options for each plugin. The package.json file should be located in the root of your web development project. Here is what my project directory structure looks like:

• build/
  • css/
  • js/
• gruntfile.coffee
• gruntfile.js
• node_modules/
• package.json
• src/
  • coffee/
  • less/
• www/
  • webroot/
    • css/
    • js/

We are now ready to install Grunt and the plugins. Also, a reference, I keep all of my web development project in a root folder named www. So, in my example, I am going to create the package.json file at /www/www.myproject.com/package.json, and I will also run the npm install command in the same location as my package file.

$ cd /www/www.myproject.com/
$ npm install

After successfully running the npm install command, you should see a folder in your project named node_modules. The next step is setting up the grunt file. The grunt file is similar to the build.xml file in Apache Ant, as this is where we will define the tasks for our automation project. However, the gruntfile will use the power of JavaScript to load our plugins and perform our tasks.

Your Gruntfile can either be a JavaScript file (gruntfile.js) or a CoffeeScript (Gruntfile.coffee) file. In the next post in the series, we will create the Gruntfile using CoffeeScript to complete our automation tasks.