Setting up grunt to automate repetitive tasks in javascript applications

You have probably heard about grunt by now. Maybe you are crystal clear on what it is, maybe its still hazy. In this post, we will go on a roller coaster ride and help you understand what grunt is so that you can start using it in your projects right away.

So, what is grunt used for?

For automating tasks like bundling, minifying, jshinting etc etc.

What are the different things in grunt?

  • A command line utility for running grunt (npm install -g grunt-cli)
  • A set of installable plugins (to be specified as devDependencies in your package.json). Each plugin provides you with ‘Tasks’ that once configured can be run from your project’s root directory.
  • A task configuration file (Gruntfile.js) in your project’s root directory that contains the configuration for each task that you have installed.

Learn by example

For the purpose of this post, we will try setup grunt to do the following things
– Run jshint on all of your source files
– Concatenate all your source files into a bundle.js
– Run jshint on your bundle

To do this, we will need to install 2 grunt plugins that provide us with these tasks.

Now our problem statement changes to…

How to run the ‘jshint’ and ‘concat’ tasks on the files that I want?

You can install them by running the following commands from your root direcotry
npm install grunt-contrib-jshint –save-dev
npm install grunt-contrib-concat –save-dev

Setting up the grunt tasks

A Gruntfile is the heart and soul of your grunt enabled application. It is nothing more than a module that exports one function that takes one argument – the grunt object.

Using this grunt object you need to do a couple of things:
– call the initConfig passing it an object that contains the configuration for each task that you want to run.
– Load the npm modules that have the capability to run those tasks.

Once you create your grunt file, your directory structure should look like this.

Now, for each grunt task, you group together configuration under a ‘target’. aka. A grunt ‘target’ is a fany name for a group of configuration parameters under a single task. A task can have many such groups/targets.

For example

Once all of this is done, you can execute grunt tasks from your project root as follows.

Thats as simple as it gets to start using grunt for your projects.

Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *