Select Page

Installing and Using Grunt

by | Apr 4, 2017 | Web Design | 0 comments

If you read my previous article How Grunt Saved My Life and are interesting in using Grunt on your next project, here’s a quick post on installing and using Grunt on a Windows 7 based machine.

Install Node JS

As Grunt runs on the Node JS framework, you need to install that package first.

Head over to the Node JS website, download and install the package for your machine.

As I’m running Windows 7 64-bit I used node-v0.10.24-x64.msi.

Installing Grunt

Because Grunt runs project specific tasks you install it on a per-project basis.

Just a quick warning – you’ll need to use the command-line a fair bit to install and configure Grunt.

With that in mind, open up a command prompt and navigate to your project home.

Make sure you are in the project root folder and not any subfolder of your WordPress project.

For the most basic Grunt installation you need to create a [codelet]project.json[/codelet] file in your project home folder.

Create it now with the following content:
[gist id=8141192 file=project.json]

You can change the name and version to whatever is specific for your project but leave the devDependencies alone for the moment.

Once your [codelet]package.json[/codelet] file has been created you install Grunt from the command line using:
[codelet]npm install[/codelet]

Because Grunt is installed on the Node JS framework, all modules are installed using the Node Package Manager (NPM)

Once finished you’ll see a summary of the grunt modules which have been installed and a new folder called [codelet]node_modules[/codelet] has been created in your project home.

Install Grunt CLI

The final part of the basic installation it to install Grunt CLI.  This is the command line interface for Grunt and the binary which runs from your command prompt.

Again, this is installed using NPM.

[codelet]npm install -g grunt-cli[/codelet]

At this stage I tested out grunt in the command line and Windows couldn’t find the binary.

It looks like the path wasn’t updated properly, even when I closed and reopened my command prompt.

A logout and login sorted the issue for me.

Let’s start using Grunt!

Minify JavaScript Using Grunt

I have an [codelet]admin.js[/codelet] text script in my [codelet]js[/codelet] folder.

We’re going to install the uglify plugin and minify the file to [codelet]admin.min.js[/codelet].

First install the uglify plugin using:
[codelet]npm install grunt-contrib-uglify –save-dev[/codelet]

This will automatically add the [codelet]grunt-contrib-uglify[/codelet] plugin to the [codelet]packages.json[/codelet] file which now looks like this:
[gist id=8141192 file=altered-project.json]

Now that we have the plugin installed we need to configure Grunt and tell it what to do.

This is done through the [codelet]Gruntfile.js[/codelet] file.  You’ll need to create a new one the first time.

[codelet]Gruntfile.js[/codelet] can be very finicky so make sure you stick to the format outlined in each modules documentation and you won’t go wrong.

Each plugin has a wealth of documentation outlining all the parameters it accepts.

Create the file now and add the following content:
[gist id=8141192 file=1-Gruntfile.js]

Of course you will need to alter the uglify plugin configuration to match your files.

Everything is installed and configured so now it’s time to run Grunt on our project.

Simply type [codelet]grunt[/codelet] into the command prompt and watch it go.
[codelet]grunt[/codelet]

As you can see from the output, a new file has been created called [codelet]admin.min.js[/codelet] and it’s been minified properly, removing the comment, tabing, whitespacing and new lines.

Optimise Images Using Grunt

This is a personal bug-bearer for me, especially on eCommerce sites where there are lots of product images.

First we need to install the [codelet]grunt-contrib-imagemin[/codelet] plugin which does all the image optimisation work.

[codelet]npm install grunt-contrib-imagemin –save-dev[/codelet]

Again the [codelet]grunt-contrib-imagemin[/codelet] plugin is added to our [codelet]package.json[/codelet] file so all we have to do is update the [codelet]Gruntfile.js[/codelet] with the new plugin configuration and details.

Edit the [codelet]Gruntfile.js[/codelet] so it now looks like this:
[gist id=8141192 file=Gruntfile.js]

Lines 15-24 show the new configuration for the imagemin plugin.
Note: remember to add a comma after the last configuration section (see end of line 13)

Line 31 tells Grunt to use the new plugin

Line 34 adds imagemin to the task list.

Windows 7 64-bit Issue

I had an issue when using this plugin on my Windows 7 64-bit OS. Several others also had the same issue and posted a fix.

And finally run Grunt again from the command line and watch all those images being squished.
[codelet]grunt[/codelet]

Summary

Here are the list of plugins I use with Grunt and my WordPress projects:

  • contrib-compass
  • contrib-compress
  • contrib–concat
  • contrib-copy
  • contrib–csslint
  • contrib–cssmin
  • contrib–imagemin
  • contrib–jshint
  • contrib-uglify
  • contrib-watch
  • clean-pattern
  • peach
  • phplint

I could go on and on showing you different plugins but I think it’s time for you to get your hands dirty.

Install Grunt today and play around with some of those plugins. You’ll never go back to doing it manually again.