Automate Builds using GruntJS

I already wrote about the awesomeness of GruntJS and here is how to set up your own Grunt system.

1. Installation

GruntJS runs on nodejs so you need that installed first. Once nodejs and npm are installed, use the following command to install Grunt (the -g flag installs it globally).

npm install -g grunt-cli

This installs the grunt cli tool, next you need to create your project deployment. Navigate to your target project directory and type the following commands:

npm init

npm install grunt

You can safely use the defaults suggested during the npm init process; this process creates a package.json file which contains information about the licence, repository, author and blah blah blah. You can also use pre-created package.json files to tell the node package manager what dependencies to install.

Make sure you keep the package.json file safe – it can be used to recreate your project or share project details with other developers. If you get weird errors, try prefixing the commands with sudo.

Type grunt now and if you this error: ‘A valid Gruntfile could not be found…‘; then give yourself a pat on the back! :)

2. Using Grunt

Creating a Gruntfile is easy; it’s mostly ‘JSON-y’ syntax; however you’ll need to install dependencies and extra features you need. The location of the Gruntfile does not matter: when you run grunt, it will walk up the directory tree until it finds a Gruntfile. So just drop the Gruntfile in the root of your project and you can grunt happily from any sub-directory.

When installing new plugins, remember to add the –save-dev switch so that your package.json file is updated. For example, to add the requirejs plugin, you’d type something like this:

npm install grunt-contrib-requirejs –save-dev

Once you’ve installed the plugins, you need to instruct Grunt to load these plugins. Adding grunt.loadNpmTasks(‘grunt-contrib-requirejs’) to your Gruntfile will fix this.

Next, you need to specify the tasks in the Gruntfile; you set up the plugin’s config options – details such as location of input files, the name and location of its output and some other options depending on the plugin. After this, you register the task with the grunt.registerTask() hook. See the sample config file for a demo.

3. Sample Grunt config

The Gist below shows a sample commented Gruntfile. The default task is run whenever you type grunt at the CLI; however to run other tasks you need to specify the task name; in the sample file below, typing grunt test will run the jshint:js and qunit tasks.

4. What do these tasks mean?

  • JsHint: This will run a static analysis check of your code to see if it complies with standards; it helps to spot hidden errors and will save you some pain. It is possible to specify different targets specified which allows you to run different tasks as you wish e.g. against some subset of your development framework.
  • Cssmin: This minifies CSS files; the options show how much the size has changed.
  • QUnit: Runs qunit tests on the specified directories against the phantomjs headless browser
  • compass: Compiles SASS files to CSS; allows you to pick up config options from a .rb config file although you can overwrite them too.

And that’s it! :)

There is a lot more than mentioned, so feel free to do some exploration and hey! Remember to tell me about it too!!

To whet your appetite, here is one: it is possible to read values from the package.json file.

Leave a Reply

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.