With the WordPress 3.8 development cycle underway, I thought it might be worth sharing how you can go about setting up Grunt for WordPress development on your local machine.
The reason for this is because WordPress is now using Grunt, JSHint, and a number of other utilities to help automate tasks, and if you’re looking to contribute to certain parts (not all, mind you) core, then these are the tools that you’re going to need – especially if you’re working on any tickets under the Build Tools component.
Grunt For WordPress
Straight from the site:
After you’ve configured it, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
This means that, given the configuration files available in the WordPress trunk, we’re able to work on the codebase and run the very same tasks in our local environment that are run when they’re prepping WordPress for release.
This is beneficial because it allows us to locate errors, find problems, and know what needs resolving before creating a patch.
1. Download Node.js
First, you need to download and install Node.js. Again, if you’re not familiar with it, no big deal:
From the website, you can click on the Install button to download the package, or you can click on the Downloads button to be taken to a page that will list out the available packages for your operating system.
Since I’m writing this and installing this from OS X, that’s obviously the package that I chose.
Once downloaded and installed through the setup program, we can actually install Grunt and several of its plugins.
2. Become Super
Next, we need to install Grunt – but there’s a catch: We want to make sure that Grunt’s command line tools are globally available throughout the operating system rather than for our user account.
There are a few parameters we’ll pass when installing the plugins, but it’s also helpful to run all of the following commands as a super user.
To do this, go ahead and
$ sudo su at the command line before doing anything else:
Easy, right? Now we’re ready to actually install Grunt.
3. Install Grunt (and Its Related Tools)
At this point, we’re ready to install three things:
- The command line tools
Doing this is relatively easy: Assuming that you’ve properly installed Node.js and that you’re operating as a super user, you can run the following commands to download and install the above tools.
From the repository root:
npm install -g grunt-cli
Assuming that you’ve got
package.json in the repository root and it includes the definitions of the dependencies that the project needs (such as JSHint), enter each command and you’ll be all set.
Note: If you read this post earlier, you may have seen that I had specified the global flag for each of the commands. Thanks to a tip from Matt Wiebe, this is only needed for the command line interface tool (which I’ve updated above). All other dependencies will be included.
At this point, you’re ready to checkout the latest version of the WordPress codebase and get to work; however, if you’re still curious as to what Grunt requires to work – such as the
Gruntfile – or how JSHint knows its rules – via the
.jshintrc file – then I highly recommend checking out the Grunt Docs.
Wait, What About WordPress?
Obviously, you’ll need to be able to checkout WordPress from Subversion, as well (though that’s beyond the scope of this post).
If you’re already comfortable with Subversion, then use the following URL:
If you’re new to all of this, no worries! The WordPress Core Handbook has a fantastic (and exhaustive) article on how to setup Subversion so that you can begin contributing.
The more people available to contribute to WordPress, the better so check out the docs, get setup with Node and Grunt, and let’s work on 3.8!