In this article we’ll learn how to use Grunt, a task runner, to automate vital web development tasks so we can forget about them. Grunt can do repetitive tasks involving concatenation, compilation, minification, listing, unit-testing, live-reloading, etc. It does these tasks with one script and can be shared among every person working on a project. This ensures that everyone working on the project is writing code of a consistent standard. It’s also easy to work with, so let’s get started.
To get Grunt set up, we’ll need Node.js installed. You don’t need to know Node to use Grunt; you just need it installed. With Node installed, run this command in the terminal:
This command tells
npm (a package manager that comes with Node) to install the grunt command-line package. This puts the
grunt command in out system path.
-g stands for “global” and allows this command to be run from any directory.
Setting up a new project
To get Grunt working in our project, we will need two files:
package.json file in our projects root directory enables us to track and install all our development dependencies. Add the following text into the
We will also need to configure Grunt to use the plugins, so create a new file in the projects root directory called
Gruntfile.js and add these lines of code:
Run the following command to install the dependencies listed in the
package.json file and save them in a
Now that we have set up Grunt, all Grunt plugins can be installed by following these steps:
- Find the plugin and install it from the command line.
- Learn and configure it using our
Let’s assume that our project directory looks something like this:
This will download the required files in the
npm_modules directory and adds
"grunt-contrib-concat": "~0.5.0" into the
devDependencies section of our
For the file structure above, Grunt concatenation can be configured using our
Gruntfile.js file like this:
First we install the uglify plugin from the command line:
Then we configure it in our
Don’t forget that we need to load the task and register it under our
default task in our
If you use a preprocessor (and you should – it’s helpful), Grunt has a plugin that will automate preprocessing for us. Assuming you already have Sass installed, we can install the Grunt plugin using the following command:
Then we load and register it:
Now we configure it:
Load and register it:
Watch and LiveReload webpages
With Grunt we can “watch” files using the grunt-contrib-watch plugin. You know the drill, install it, load it, and register it.
Here’s how to configure it:
We can take this a step further and enable the LiveReload ability which comes with the watch plugin.
To get LiveReload working, we will need to:
- Install the free LiveReload browser extension
- Click the LiveReload button in our browser to activate it.
- Add a few lines to the
watchconfiguration in the
Grunt can help us automate a lot out our projects, helping us focus on the fun stuff. There are many more plugins available here. A few of my favorites that I didn’t mention already are cssmin, jshint, csslint, autoprefixer, htmlmin, svgmin, and copy. Have fun!