Losing My Grunt Virginity
I’ve been meaning to tap out a little blog post on how I got up and running with Grunt on my Windows 8 laptop. I’d been wanting to find a spare 30 minutes to give Grunt a whirl ever since I saw Eric Mann’s talk on Automated WordPress Development at WCSF (which I’ve embedded at the end of this post so you can see what all the fuss is about). So I’ll jot down the steps I took to get Grunt up and running.
Setting Up Grunt on Windows
Getting setup was much faster that I was expecting to be honest. I never used to be much of a command line kinda guy but I’ve definitely seeing the light with some of the automation tools such as Grunt and Vagrant that have been popping up over the last couple of years. I was literally up and running with Grunt in 15 minutes just by doing the following steps:
- I installed Node.js http://nodejs.org/download/
- Opened a command line and typed:
npm install -g grunt-cli
I then installed Sass by typing:
npm install grunt-contrib-sass
I then installed Compass as well because I’m a massive fan of it and use it in all our theme and plugin development now.npm install grunt-contrib-compass
- Edit: It turned out these two commands weren’t doing anything. Props to Evan Solomon for the tip!
- Then it was time to get Grunt set up by typing:
npm install -g grunt-init
- My next plan of attack was to see if I could get 10up’s Grunt WordPress Theme running which Eric demo’s in his talk below.
- I followed Eric’s instructions in the Readme.md but the only minor issue I had was cloning the repo to the correct place. When I ran:
git clone git@github.com:10up/grunt-wp-theme.git %USERPROFILE%/.grunt-init/wp-theme
My Windows machine actually created a %USERPROFILE% directory rather than resolving correctly so to fix this I went into the %USERPROFILE% directory and moved .grunt-init folder up one directory. e.g. c:/Users/Bronson
- Then all I had to do was open a command line and type:
grunt-init wp-theme
- Boom! Experience the awesomeness that is Grunt thanks to 10up’s repo!
I’m working on a Sennza WordPress Grunt theme over the next couple of weeks (after I’ve completed a few client projects) that will contain quite a few more prompts during the setup process to ask which templates are required for the theme. e.g. author, category, tag, archive, page templates.
Running Grunt on WordPress core
For those of you who have been following the new change in development workflow for WordPress core development, you’ll be aware that Grunt is being used to automate a few tasks such as uglification & minification of JavaScript and CSS files, unit tests and file concatenation just to name a few. You can see all the tasks here under the ‘// Load tasks’ comment. So now that you have Grunt on your computer you probably want to run Grunt against trunk to witness the magic right? Here’s how easy that is to do:
- Checkout http://develop.svn.wordpress.org/trunk/using your SVN client of choice. I used TortoiseSVN.
- Open your command line and change directories so you are in the directory where you downloaded trunk then type:
npm install
- Now type:
grunt
- Change some core files and watch the output in your command line where you initialised Grunt!
