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 CLI
sudo npm install -g grunt-cli
Node Package Manager
Global
Grunt: Command Line Interface
Install
Super...
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 PROJECT
cd [your project root]
npm init
npm install grunt --save-dev
• Change directory;
• Node Package Man...
WHAT DIDTHAT DO?
4. GRUNT PLUGINS
• Javascript minification:

grunt-contrib-uglify	

• File concatenation:

grunt-contrib-concat	

• Unit Te...
5.WRITE OUR GRUNTFILE
Project 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-wei...
Grunt js and WordPress
Grunt js and WordPress
Grunt js and WordPress
Grunt js and WordPress
Grunt js and WordPress
Grunt js and WordPress
Upcoming SlideShare
Loading in …5
×

Grunt js and WordPress

1,078 views
912 views

Published on

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

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,078
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Grunt js and WordPress

  1. 1. wherethetruck.at @JackBarker GETTING STARTED WITH #WPMelb
  2. 2. WHAT IS GRUNT ??? • “The JavaScript task runner” • gruntjs.com • Cross-platform • Runs on Node.js • nodejs.org
  3. 3. SO… WHAT EXACTLY ARE YOU AUTOMATING?
  4. 4. WHY AUTOMATE WITH GRUNT?
  5. 5. Functionality Ease of use
  6. 6. 1. INSTALL GRUNT CLI sudo npm install -g grunt-cli Node Package Manager Global Grunt: Command Line Interface Install Super User: Do
  7. 7. If it doesn’t say “Error”, then it worked!
  8. 8. 2. DECIDE WHERE TO CREATE PROJECT Project Root Wordpress / public_html wp_content wp_config.php […etc] package.json
  9. 9. 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
  10. 10. WHAT DIDTHAT DO?
  11. 11. 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
  12. 12. 5.WRITE OUR GRUNTFILE Project Root wordpress wp_content wp_config.php […etc] Gruntfile.js node_modules package.json
  13. 13. WORKED EXAMPLE (UGLIFY)
  14. 14. Example: https://github.com/gruntjs/grunt-contrib-uglify Applied to Wordpress
  15. 15. RESULT
  16. 16. WORKED EXAMPLE (IMAGEMIN) npm install grunt-contrib-imagemin --save-dev
  17. 17. 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

×