The document provides a guide on getting started with Grunt, a JavaScript task runner built on Node.js. It outlines essential steps for installation, project setup, and utilizing Grunt plugins for tasks such as minification and testing. Additionally, it references various resources for further information and example implementations.

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