grunt js and wordpress
DESCRIPTION
Working with Grunt JS and WordPress. A presentation by Jack Barker at the WordPress Melbourne Meetup April 2014TRANSCRIPT
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