WordPress and Grunt

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

For those of you who aren’t familiar, Grunt is a JavaScript-based task runner.

Grunt

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.

But here’s the catch: Since it’s a JavaScript-based tool, there are several things that you need to install on your local environment – and several nuances – to make sure that it’s global available on the command line.

1. Download Node.js

First, you need to download and install Node.js. Again, if you’re not familiar with it, no big deal:

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.

Think of it as a way to run server-side JavaScript.

Node JS

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:

sudo su

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:

  • Grunt
  • The command line tools
  • JSHint

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
  • npm install

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: http://develop.svn.wordpress.org/trunk/.

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!

Category:
Notes
Tags:

Join the conversation! 9 Comments

  1. you know just the other day I was looking for something like this, first heard of Grunt at the SF WordCamp this year. THANK YOU! lol trying to wrap my head around Grunt

  2. This is generally a setup for any web-situation.
    Related to WP I have used Grunt for my theme. I am a front-end ops after all ;)

    It’s really awesome if you know how to use it to your advantage. Be sure to use the grunt plugins you really do need. Of course, that comes after some try and experimenting!

    In the end this can work well as a tool!

  3. What “repository root”, Tom? Is step zero “Clone the WP repo?” (It might go without saying, but still should be clarified for newbies to make a complete tute.)

    Also, would we need to run that install process for any repo or folder where we want to use Grunt with?

    Thanks

    • Hey Chris – good questions!

      Yes, by repository root, I was referring to pulling down the WordPress trunk in Subversion. That’s where the `Gruntfile` is kept and where the `.jshintrc` file is kept so the tools know what configuration to use.

      You should not have to run the install for every repository if you installed it using the super user or at the global level – all that would need to be in the repository root in the `Gruntfile`.

  4. Tom-
    We wanted to let you know that we loved your article and added it to our Monthly Resource Roundup. http://blog.nexcess.net/2013/12/05/monthly-round-up-novembers-best-expressionengine-wordpress-magento-content/
    Cheers!

  5. I’m getting an error saying it can’t find the package.json file. When I ran npm install package.json that installed the file in /nod_modules/package.json/package.json in my user folder, however, the error indicates it wants the package.json in the root, but when I copy the file up, I get an error saying there is “No repository field”.

    npm install -g grunt-cli installed properly with no errors, but after that, it all starts to break down for me.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.