Getting Started With Grunt for WordPress Development

GETTING STARTED WITH GRUNT FOR WORDPRESS DEVELOPMENTDavid “DANGER” Bisset WORDPRESS MEETUP - OCTOBER 2014

What Is A Task Runner?

A task runner (or build system) is a script that executes a list of actions,

typically using one or more plugins.

PREPROCESSING

WHAT CAN YOU DO?

• SASS

• LESS

• COFFEESCRIPT

MINIFY

WHAT CAN YOU DO?

• CSS

• JAVASCRIPT

MINIFY

WHAT CAN YOU DO?

WHAT CAN YOU DO?

• JSHINT

• JSLINT

LINT FILES

REFRESH BROWSER EACH TIME YOU MAKE A CHANGE TO A FILE

WHAT CAN YOU DO?

LIVE RELOAD CHANGES

• START A WEB SERVER

• OPTIMIZE IMAGES

• OUTPUT TO HTML

• ALMOST ANYTHING!

WHAT CAN YOU DO?

Other THINGS:

Popular Task Runners

• GRUNT.JS

• GULP.JS

• CAKE

• BRUNCH

• BROCCOLI

GRUNT.JS

LET’S TAKE A LOOK

Why Go With Grunt.JS?

• Grunt.js is built on Node.js

• It’s the most popular task runner

• The community is large (and helpful)

• Thousands of available plugins

• Building custom plugins is really easy

NODE.JS

GRUNT REQUIRES:

What Is Node.JS?

NODE.JS IS JAVASCRIPT THAT RUNS ON A SERVER OR A TERMINAL

How Do You Install Node.JS?

HTTP://NODEJS.ORG

NPM (NODE PACKAGE MANAGER)

NODE.JS COMES WITH:

npm install -g grunt-cli

Installing Grunt CLI (Command Line Interface)

http://gruntjs.com/getting-started

package.json

PREPARING A NEW GRUNT PROJECT

Gruntfile.js

PREPARING A NEW GRUNT PROJECT

Uglify

Installing grunt modules

npm install grunt-contrib-uglify --save-dev

Installing Uglify

https://github.com/gruntjs/grunt-contrib-uglify

Go Back To Gruntfile.js

grunt

Go Back To Gruntfile.js

grunt uglify

Watch

Installing grunt modules

npm install grunt-contrib-watch --save-dev

Installing Uglify

https://www.npmjs.org/package/grunt-contrib-watch

Go Back To Gruntfile.js

How File Matching Works// Matches a single file files: 'foo.js' !// Matches an array of files files: [ 'foo.js', 'bar.js' ] !// Matches all files in the dir files: '*' !// Matches all files with a given extension in the dir files: '*.js' !// Matches all files with a given extension in all dirs files: '**/*.js' !// Matches all files w/extension in this dir and one dir deeper files: '{,*/}*.js'

Other Cool Links To Check Out

https://www.npmjs.org/package/grunt-wordpress-deploy

Deploy a Wordpress instance without pain using Grunt.

you can define different environments.

Adapt the Wordpress database to the destination domain.

Other Cool Links To Check Out

https://github.com/10up/grunt-wp-plugin

Create a WordPress plugin with grunt-init.

Create a WordPress THEME with grunt-init.

https://github.com/10up/grunt-wp-theme

Other Cool Links To Check Out

https://github.com/roots/roots

WordPress starter theme based on HTML5 Boilerplate & Bootstrap

MORE READING!

https://mondaybynoon.com/grunt-wordpress-theme-development/

THANK YOU.David “SHOULD HAVE HAD A V8” Bisset davidbisset.com / @dimensionmedia