Task runners help automate various tasks like compiling sass, minify and concatenate html, css and javascript, pushing files to git and ftp, automatic browser refresh and more.

One of the widely used task runners is Grunt. below is a step by step guide on how to install it on a windows machine.

Install Node.js and NPM

Grunt is dependable in Node.js, a server side JS environment. We also need the Node Package Manager (NPM) – included in node.js installer – to be able to install grunt.

Head over to Node’s downloads page and download your system’s version.

Install Grunt globally

There are two parts of Grunt, the global version which is called Grunt CLI and the local version which we install in our project’s directory and is responsible for all the magic.

To install the general version, open up CMD (open start menu and search) then write the following line:

This will download and install grunt on your machine.

Install Grunt locally

After grunt is installed globally, we need to install the local version in our project directory. To do that we will need to create a “package.json” file, this file act as the project’s npm settings. In it’s simplest form, it consists of the project’s name, version and the “devDependencies”   (more on that later in the article). The local version of “grunt” is one of the “devDependencies”.

Copy and paste the following JSON code into a new file and save it as “package.json” in the project’s root directory

devDependencies

An array of the development packages we are going to install and use in our project. For example if we wanna use grunt to minify CSS we will use a package called “grunt-contrib-cssmin“.

How to install devDependencies

Open CMD in your project’s folder and use the following syntax to install any package.

This will download and install the requested package and update the “devDependencies” array in “package.json”

To install grunt just run the following command

To install the CSS minification package run

If you take a look at the “package.json” file, it should be updated with the installed packages.

Visit the grunt’s plugins page for a full list of available packages.

The anatomy of Gruntfile.js

One more thing grunt requires is the “Gruntfile.js”, which actually does all the work. In this file we setup the tasks we have just installed. Every package (task) have it’s own documentation and could be found by a simple google search.

The gruntfile consists of three main pieces

The wrapper function

The first part is the “wrapper” function, which encapsulates your Grunt configuration. Within that function we can initialize our configuration object.

Next we can read in the project settings from the package.json file into the pkg property. This allows us to refer to the values of properties within our package.json file.

This leaves us with this so far:

Tasks setup

In this part, we setup and configure our packages. Check the below the configuration for the Uglify package:

Loading and registering tasks

Finally, we need to load and register theses tasks so we can run them in the command line

And finally set up some tasks. Most important is the default task:

Running grunt tasks

So far, we’ve installed grunt, the needed packages and configured them. We still need to run the task for it to work. Based on the use example if you just type “grunt” in the CMD it will run the “default” tasks we’ve just setup and by typing “grunt test” it will run the test task.

For a more detailed explanation of Gruntfile.js, please head to it’s official page on grunt’s website.

Working with an existing Grunt project

Now if you want to work on a project with Grunt already installed (have package.json and gruntfile.js) all we have to do is type “npm install” in the command line, this will check the “package.json” file and install the required packages.

If the project contains the “node_modules” folder, this means that packages are already installed, just run Grunt as usual.

That is it, let me know your thoughts in the comments.