Grunt js and WordPress

wherethetruck.at @JackBarker

GETTING STARTED WITH

#WPMelb

WHAT IS GRUNT ???

• “The JavaScript task runner”

• gruntjs.com

• Cross-platform

• Runs on Node.js

• nodejs.org

SO… WHAT EXACTLY ARE YOU AUTOMATING?

WHY AUTOMATE WITH GRUNT?

Functionality

Ease of use

1. INSTALL GRUNT CLIsudo npm install -g grunt-cli

Node Package Manager

GlobalGrunt: Command Line Interface

Install

Super User: Do

If it doesn’t say “Error”, then it

worked!

2. DECIDE WHERE TO CREATE PROJECT

Project Root

Wordpress / public_html

wp_content

wp_config.php

[…etc]

package.json

3. CREATE NODE PROJECTcd [your project root]

npm init

npm install grunt --save-dev• Change directory;

• Node Package Manager;Initialise a new project

• Node Package Manager;Install grunt to our project; andAdd it to our list of project dependencies

WHAT DID THAT DO?

4. GRUNT PLUGINS

• Javascript minification: grunt-contrib-uglify

• File concatenation: grunt-contrib-concat

• Unit Testing: grunt-contrib-qunit

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

• JS hint: grunt-contrib-jshint

• Watch: grunt-contrib-watch

• GitHub

• Wordpress Deployment grunt-wordpress-deployhttps://www.npmjs.org/package/grunt-wordpress-deploy

5. WRITE OUR GRUNTFILEProject Root

wordpress

wp_content

wp_config.php

[…etc]

Gruntfile.js

node_modules

package.json

WORKED EXAMPLE (UGLIFY)

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

Applied to Wordpress

RESULT

WORKED EXAMPLE (IMAGEMIN)

npm install grunt-contrib-imagemin --save-dev

MORE INFORMATION

• Grunt.js http://gruntjs.com/getting-started

• Chris Coyier :http://24ways.org/2013/grunt-is-not-weird-and-hard/

• Smashing Magazine:http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/

• Github