Grunt & Bower Configuration for WordPress Themes

Grunt Logo

I recently spent some time building a new WordPress theme and decided to leverage Grunt and Bower in the process. I’m sure there are already some awesome Yeoman generators out there, but I opted to create my own simple setup. I wanted to incorporate Bootstrap and FontAwesome, then add some simple Grunt tasks to compile, minify, etc.

I’ve put my work into a repo called grunt-bower-wordpress that includes the package.json, bower.json, and GruntFile.coffee that you’ll need to get started. If you’d like to give it a try, just run the following to clone the repo and build it:

> git clone git@github.com:justinklemm/grunt-bower-wordpress.git
> cd grunt-bower-wordpress
> npm install

That’s it! When the npm install command is done downloading the packages it needs, it’ll automatically download the Bower packages (for Bootstrap, FontAwesome and jQuery), then use Grunt to process the JavaScript and LESS files. To rebuild the theme’s JavaScript/LESS, use the build command:

> ./node_modules/.bin/grunt build

There’s also a Grunt command that’ll watch your files and rebuild them when they change. It attempts to refresh your browser using LiveReload. It’s useful while you’re working on your theme. Simply run:

> ./node_modules/.bin/grunt watch

Now, let’s talk about exactly what this is and how it’s setup. Remember that this isn’t a WordPress theme itself. It’s meant to work within a WordPress theme to process and compile your JavaScript/LESS. You can drop your initial theme files in with these files, or move these files into the theme you’re building.

If you ignore all the build-related files in the repo, the setup simply has a /js directory and a /less directory. Grunt will concatenate and minify all the *.js files in /js and output them to /prod.js (jQuery will automatically be included). It’ll also compile all the *.less files in /less and output them to /style.css (Bootstrap and FontAwesome will automatically be included).

I’ve included a gist of the Gruntfile.coffee below (also included in the repo), so you can get a quick overview of the task setup. Enjoy!