WordPress Scaffolding with Grunt.js

WordPress Scaffolding?

We use WordPress for the majority of our content managed websites. It is a fast and flexible platform that is easy to use. One thing we are keen on is building tools to optimise our workflow and speed up repetitive tasks. (like our barebones theme – Flexbones). It gives our developers more time to work on the task at hand rather than setting up development environments.

Grunt?

Grunt JS Logo

For the last few months we have been integrating grunt.js into our development workflow. Grunt is a task runner which we use for many things. We use it to reduce image sizes, compile SASS and compress javascript among other common tasks.  It took a bit of tweaking but we launched Grunt WordPress Scaffolding a few days ago published on GitHub.

The task at hand

When starting any project you need to perform the following steps to install WordPress and get ready to begin coding. Here are the tasks that Grunt WordPress Scaffolding handles:

  1. Download the latest WordPress version
  2. Install WordPress
  3. Setup MySQL creating the necessary database and tables.
  4. Set up an administrator account to manage the site
  5. Install and activate a theme

Our Grunt file utilises the fantastic WordPress Command Line Interface(WP-CLI) allowing us to execute a heap of useful WordPress scripts effortlessly. The Grunt file uses WP-CLI for most of the tasks involved with installing and configuring WordPress.

Grunt WordPress Scaffolding utilises a custom directory structure. We have set things up so the directory structure looks like this project/wordpress and project/wp-content. We still serve the sites from the project root folder but we now have completely isolated our code from that of WordPress.

Getting Started

First you need to install grunt.js and install WP-CLI and any dependencies they require such as Node for Grunt. We won’t go into detail here on getting Grunt and WP-CLI set up as there are plenty of resources on that. As of writing we are using version 0.4.5 of Grunt and version 0.16.0 of WP-CLI.

MAMP

MAMP users will need to add both PHP and MYSQL to their $PATH. The cleanest way of doing this is with a bash profile. Simply create a file in your user directory called ‘.bash_profile’ and add the following lines:

export PATH=/Applications/MAMP/bin/php/phpX.X.X/bin:$PATH
export PATH=/Applications/MAMP/Library/bin:$PATH

Make sure to use the correct version of PHP and ensure that the location is correct. You will need to refresh your PATH once these are added by typing the following into a terminal window:

source ~/.bash_profile;

This will reload your bash_profile to ensure the system uses it. You can test that the correct versions are being used by typing which php and which mysql into a terminal window.

Setup

To begin, grab the latest version on GitHub here and place the files in the root of your project directory. Next open up Gruntfile.js and amend the configuration variables as required. Don’t create the database as the script will create it for you!

Open up a terminal and cd into your project directory. You will need to install the dependencies, which you can easily do by typing npm install which will download and install them all in one go.

Once all the dependencies are installed type into terminal:

grunt setup

Results

If all goes well you should see something like the following screenshot. Don’t adjust your glasses you read that right, 19.8s to fully download, install and configure! This was the first time I ran the script and to be fair we have pretty excellent broadband speed in our office so results may vary. Once you download WordPress using our Grunt script, WP-CLI caches a copy so next time you run the script it will be even faster.

We have only tested the script running in an OSX environment so far but it should work perfectly  in linux (Sorry windows devs!).  We would love your feedback, bug reports and improvement suggestions, you can submit them here.

The next project for us is to expand upon what we have here to build a very simple to use deployment script for staging and deployment. Stay tuned.

Leave a Reply

You must be logged in to post a comment.