Working with Grunt JS and WordPress. A presentation by Jack Barker at the WordPress Melbourne Meetup April 2014

1. wherethetruck.at @JackBarker
GETTING STARTED WITH
#WPMelb

2. WHAT IS GRUNT ???
• “The JavaScript task runner”
• gruntjs.com
• Cross-platform
• Runs on Node.js
• nodejs.org

4. SO… WHAT EXACTLY ARE
YOU AUTOMATING?

5. WHY AUTOMATE WITH
GRUNT?

6. Functionality
Ease of
use

8. 1. INSTALL GRUNT CLI
sudo npm install -g grunt-cli
Node Package Manager
Global
Grunt: Command Line Interface
Install
Super User: Do

9. If it doesn’t say
“Error”, then it
worked!

10. 2. DECIDE WHERE TO
CREATE PROJECT
Project Root
Wordpress / public_html
wp_content
wp_config.php
[…etc]
package.json

11. 3. CREATE NODE PROJECT
cd [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; and
Add it to our list of project dependencies

12. WHAT DIDTHAT DO?

13. 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-deploy
https://www.npmjs.org/package/grunt-wordpress-deploy

15. 5.WRITE OUR GRUNTFILE
Project Root
wordpress
wp_content
wp_config.php
[…etc]
Gruntfile.js
node_modules
package.json

16. WORKED EXAMPLE
(UGLIFY)

18. Example: https://github.com/gruntjs/grunt-contrib-uglify
Applied to Wordpress

19. RESULT

20. WORKED EXAMPLE
(IMAGEMIN)
npm install grunt-contrib-imagemin --save-dev

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