1. @jamesbundey (because who has the time to read the documentation) Getting started with Grunt & WordPress, & throw in a bit of Bower

2. @jamesbundey What is Grunt? Javascript task runner using plugins that are installed via npm (Node Packaged Modules) and the node.js package manager Utilise a wide range of plugins Automate repetitive and mundane tasks Speed up workflow and development Find out more at gruntjs.com 3. @jamesbundey What is Bower? Package manager for frameworks, libraries & assets Works by fetching packages remotely and installing them locally Speeds up workflow Find out more at bower.io 4. @jamesbundey Getting Started Step 1 - Youre going to need to do the following; Download and install Node.js - http://nodejs.org Install Git - http://git-scm.com Step 2 Get familiar and comfortable with the command line. Step 3 Install Grunt - npm install -g grunt-cli Install Bower - npm install -g bower 5. @jamesbundey Setting up Grunt Grunt works on a per-project basis Create a package.json file in your theme folder - this is going to hold your plugin information { "name": "my-project-name", "version": "1.0.0", } Install the latest version of Grunt npm install grunt --save-dev 6. @jamesbundey 7. @jamesbundey Add Packages Your package.json file is updated { "name": "my-project-name", "version": 1.0.0", "devDependencies": { "grunt": "^0.4.5" } } Add plugins as required depending on workflow and requirement npm install Once added you can use this file as a blueprint for every project - just remember to npm install -save -dev Once youre happy install your plugins npm install 8. @jamesbundey 9. @jamesbundey Create Gruntfile.js - this is going to run your tasks. module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // Add Grunt plugin tasks here }); // Load the plugin that provides the task. grunt.loadNpmTasks(plugin-name'); // Default task(s). grunt.registerTask('default', [plugin_task']); }; 10. @jamesbundey Setting up Bower Create bower.json file in your theme folder and define options as required. - bower init Add packages as required bower install --save bower install --save-dev Once set-up this file can be moved from project to project 11. @jamesbundey Allow me to demonstrate 12. @jamesbundey Using Gruntfile.js to grab packages from Bower.json file 13. @jamesbundey Copying my Bower package files into my theme structure 14. @jamesbundey Setting up my default Grunt process with my theme & creating output files 15. @jamesbundey Using Grunt Watch to run my Grunt process and update files as I modify my theme 16. @jamesbundey Resources Some great articles Ive found useful http://24ways.org/2013/grunt-is-not-weird-and- hard/ http://www.zell-weekeat.com/wordpress-with- grunt/ http://mattbanks.me/grunt-wordpress- development-deployments/ 17. @jamesbundey Questions? CONNECT WITH ME @jamesbundey http://www.linkedin.com/in/jamesbundey james.bundey@creativeapproach.com.au www.creativeapproach.com.au