Grunting WordPressAutomate your WordPress development

workflow with Grunt.js

Josh LeeOwner & Lead Developer / QC Creative

@joshleecreates

Why Grunt?What can it do for me?

All the repetitive chores...● Compile LESS, SASS,

Stylus, CoffeeScript, etc.

● JSHint / JSLint● Concatenate and

minify scripts and styles

● Run with different settings for development and “builds”

● Automatically generate sprite sheets

● Deploy using git, ftp, scp or rsync

● Live reload in the browser

● Compress images

Grunt uses Plugins

“contrib-” = officially maintained

● contrib-watch● contrib-jshint● contrib-clean● contrib-copy● contrib-uglify● contrib-imagemin● contrib-concat

● contrib-less● contrib-sass● contrib-compass● contrib-stylus● contrib-livereload● contrib-cssmin● contrib-htmlmin

Step 1Install Node.js & NPM: http://nodejs.

org/

Step 2Make a basic package.json

A basic pa

Install the Grunt-CLI globally

Install grunt in your project folder

Using “--save-dev” automatically updates package.json

Install some plugins… (with --save-dev)

All NPM packages (Grunt and it’s plugins) get installed in `node_modules/`

Add this directory to .gitignore to prevent repo bloatNew developers can install all dependencies with `npm install` in the

project dir

Gruntfile.js — the secret sauce(example from http://mattbanks.me/grunt-wordpress-development-deployments/)

fancy trick to autoload all grunt plugins

from

http

://ju

stin

klem

m.c

om/g

runt

-bow

er-w

ordp

ress

-them

es/

WordPress

This is not ideal...

For theme and plugin development, keep grunt stuff in the theme/plugin folder

● Use one Gruntfile for the entire site● Combine CSS and JS from multiple plugins and

your theme — speeds up your site!

Best when:● you have complete control over site code● you want to use grunt for deployment

Supercharge your whole site

Grunt stuff is in the top-level folderwith the other developer files

This whole foldercan be safelydeployed withoutwriting out longlists of ignored filesfor your deploy system

WordPress in a subdirectory

Let’s do it live...

Other Tools

● Bower● Composer● Yeoman● roots.io● WP Stack

Josh Leewww.joshuamlee.comjosh@qccreative.com@joshleecreates

Questions?