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
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
Create it now with the following content:
[gist id=8141192 file=project.json]
You can change the name and version to whatever is specific
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
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
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 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
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,
Optimise Images Using Grunt
This is a personal
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
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
contrib -compasscontrib -compresscontrib –concat contrib -copycontrib –csslint contrib –cssmin contrib –imagemin contrib –jshint contrib -uglifycontrib -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.