A 20-minute introduction on using grunt.js to optimize your WordPress development workflow

1. Grunting WordPress
Automate your WordPress development
workflow with Grunt.js

2. Josh Lee
Owner & Lead Developer / QC Creative
@joshleecreates

3. Why Grunt?
What can it do for me?

4. 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

5. Grunt uses Plugins

6. “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

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

8. Step 2
Make a basic package.json

9. A basic pa

10. Install the Grunt-CLI globally

11. Install grunt in your project folder

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

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

14. All NPM packages (Grunt and it’s plugins) get installed in
`node_modules/`
Add this directory to .gitignore to prevent repo bloat
New developers can install all dependencies with `npm install` in the
project dir

15. fancy trick to autoload
all grunt plugins
Gruntfile.js — the secret sauce
(example from http://mattbanks.me/grunt-wordpress-development-deployments/)

16. from http://justinklemm.com/grunt-bower-wordpress-themes/

18. WordPress

20. This is not ideal...

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

22. Supercharge your whole site
● 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

23. Grunt stuff is in the
top-level folder
with the other
developer files
This whole folder
can be safely
deployed without
writing out long
lists of ignored files
for your deploy system
WordPress in a
subdirectory

24. Let’s do it live...

25. Other Tools
● Bower
● Composer
● Yeoman
● roots.io
● WP Stack

26. Questions?
Josh Lee
www.joshuamlee.com
josh@qccreative.com
@joshleecreates