grunt js and wordpress
DESCRIPTION
Working with Grunt JS and WordPress. A presentation by Jack Barker at the WordPress Melbourne Meetup April 2014TRANSCRIPT
![Page 1: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/1.jpg)
wherethetruck.at @JackBarker
GETTING STARTED WITH
#WPMelb
![Page 2: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/2.jpg)
WHAT IS GRUNT ???
• “The JavaScript task runner”
• gruntjs.com
• Cross-platform
• Runs on Node.js
• nodejs.org
![Page 3: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/3.jpg)
![Page 4: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/4.jpg)
SO… WHAT EXACTLY ARE YOU AUTOMATING?
![Page 5: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/5.jpg)
WHY AUTOMATE WITH GRUNT?
![Page 6: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/6.jpg)
Functionality
Ease of use
![Page 7: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/7.jpg)
![Page 8: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/8.jpg)
1. INSTALL GRUNT CLIsudo npm install -g grunt-cli
Node Package Manager
GlobalGrunt: Command Line Interface
Install
Super User: Do
![Page 9: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/9.jpg)
If it doesn’t say “Error”, then it
worked!
![Page 10: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/10.jpg)
2. DECIDE WHERE TO CREATE PROJECT
Project Root
Wordpress / public_html
wp_content
wp_config.php
[…etc]
package.json
![Page 11: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/11.jpg)
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
![Page 12: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/12.jpg)
WHAT DID THAT DO?
![Page 13: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/13.jpg)
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
![Page 14: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/14.jpg)
![Page 15: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/15.jpg)
5. WRITE OUR GRUNTFILEProject Root
wordpress
wp_content
wp_config.php
[…etc]
Gruntfile.js
node_modules
package.json
![Page 16: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/16.jpg)
WORKED EXAMPLE (UGLIFY)
![Page 17: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/17.jpg)
![Page 18: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/18.jpg)
Example: https://github.com/gruntjs/grunt-contrib-uglify
Applied to Wordpress
![Page 19: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/19.jpg)
RESULT
![Page 20: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/20.jpg)
WORKED EXAMPLE (IMAGEMIN)
npm install grunt-contrib-imagemin --save-dev
![Page 21: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/21.jpg)
![Page 22: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/22.jpg)
![Page 23: Grunt js and WordPress](https://reader034.vdocuments.net/reader034/viewer/2022052505/554c0eaab4c905ec518b46dd/html5/thumbnails/23.jpg)
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