Using Grunt with WordPress Themes

By Devin

Over the last couple weeks I’ve started using Grunt with all my WordPress themes. It’s a development tool that helps automate certain tasks- like generating translation files, building sass files, adding browser prefixes, and minifying scripts.

Do you think we can automate some of this?
Do you think we can automate some of this?

A tool like CodeKit does many of the same tasks (and I highly recommend it if the command line terrifies you), but Grunt gives you more control and a huge library of modules to work with.

If you haven’t heard of Grunt yet, I think the place most people start is with Chris Coyier’s article “Grunt for People Who Think Things Like Grunt are Weird and Hard“.

Starting with Grunt

The only task I used Grunt for in the beginning was generating the .pot file for translators. Even with the i18n command line tools, this had always been a chore to generate before I uploaded new projects to the WordPress.org repository.

After that, I just slowly started moving CodeKit out of my workflow and moving those tasks (sass, watch, concat, minify) over to Grunt. Now I’m constantly on the hunt for new modules that will save me time and improve my workflow.

Packages

I created a fork of Underscores (Underscores Grunt) to show some of the packages and tasks I generally use. (It’s a pretty vanilla fork, I didn’t break up the sass files or anything- it’s just to give you an idea of the basics.)

{
	"name": "underscores-grunt",
	"version": "1.0.0",
	"devDependencies": {
		"grunt": "~0.4.5",
		"grunt-cli": "~0.1.9",
		"load-grunt-tasks": "~0.4.0",
		"grunt-contrib-watch": "~0.6.1",
		"grunt-contrib-sass": "~0.7.3",
		"grunt-autoprefixer": "~0.7.2",
		"grunt-csscomb" : "~2.0.1",
		"grunt-contrib-concat": "~0.3.0",
		"grunt-contrib-uglify": "~0.4.0",
		"grunt-wp-i18n": "~0.4.3"
	}
}

grunt-autoprefixer

grunt-autoprefixer adds browser pre-fixes to any of your css properties that might need them.

grunt-csscomb

grunt-csscomb is a neat one to normalize your css output. I cribbed the .csscomb.json file from Gary Jones- who’s proposing it for WordPress core.

grunt-wp-i18n

grunt-wp-i18n is a package by Bradley Vercher to generate those pesky .pot files for translators.

load-grunt-tasks

load-grunt-tasks is pretty meta. It is a grunt task that automates the loading of all your packages defined in package.json.

Others

The others are pretty standard packages for watching files, processing sass, and minifying scripts.

Tasks

You can see my example Gruntfile.js here.

When I’m developing a new theme, I generally just need Grunt to watch my files and generate my css from sass. So that’s set to run on “grunt watch”.

Everything else (translation files, css comb, autoprefixes, minification of scripts) happens only when I type “grunt release”.

Minification / Uglification

Since most of my themes are released publicly, I don’t do as much resource compression as you would normally do. I still want the CSS to be readable. But I have started compressing my scripts and combining them into one.

In functions.php, I check whether WP_DEBUG or SCRIPT_DEBUG is set to true. If so, I’ll load the unminified versions of the scripts. If not, I load the compressed and combined version.

if ( WP_DEBUG || SCRIPT_DEBUG ) {

	wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( '_s-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

} else {

	wp_enqueue_script( '_s-combined', get_template_directory_uri() . '/js/combined.min.js', array(), '20130115', true );

}

This is also similar to how WordPress core does it.

Other Resources

When getting set up, it was really helpful for me to look at other WordPress themes that were using Grunt. Here’s a few you might want to check out:

The next thing I’m excited to learn about it project scaffolding. It allows you to set prompts before a new project creation, and then automate the building of that set up. Two repos I’ve just started to peek at are:

Other WordPress Theme Grunt tutorials and resources:

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

3 Responses

  2. Mickey Kay

    Hi Devin,

    Thanks for the great tutorial. Do you just manually update the versions in package.json as needed? I’m trying to set this up for myself in as automated a fashion as possible, and I’d love to know if there’s a way to avoid having to constantly monitor the version numbers of the project’s Grunt dependencies.

    Thanks!

    PS – perhaps this is what I’m looking for? https://www.npmjs.org/package/grunt-dev-update

    1. Devin

      Hey Mickey. If you use the carrot to include dev dependencies (instead of the tilde “~”) it will give you the most recent version that is compatible with the version you specify. E.g. ^2.0.0 will give you the most recent version compatible with 2.0.0. This is probably a good way to do it since you’d probably want to know if there were breaking changes. If you run “npm update” it updates all your dependency packages.

Leave a Reply