Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to using Grunt & Bower with WordPress theme development


Published on

A presentation given at the Melbourne WordPress developers meet-up in August 2014. It was meant as a simple introduction to how you can incorporate Grunt & Bower into your development workflow.

You can grab the example files here -

Published in: Education
  • Be the first to comment

Introduction to using Grunt & Bower with WordPress theme development

  1. 1. @jamesbundey (because who has the time to read the documentation) Getting started with Grunt & WordPress, & throw in a bit of Bower
  2. 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
  3. 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
  4. 4. @jamesbundey Getting Started • Step 1 - You’re going to need to do the following; • Download and install Node.js - • Install Git - • 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. 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. 6. @jamesbundey
  7. 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 <plugin name> • Once added you can use this file as a blueprint for every project - just remember to npm install <plugin name> —-save -dev • Once you’re happy install your plugins npm install
  8. 8. @jamesbundey
  9. 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. 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 <package git name> --save bower install <package git name> --save-dev • Once set-up this file can be moved from project to project
  11. 11. @jamesbundey Allow me to demonstrate
  12. 12. @jamesbundey Using Gruntfile.js to grab packages from Bower.json file
  13. 13. @jamesbundey Copying my Bower package files into my theme structure
  14. 14. @jamesbundey Setting up my default Grunt process with my theme & creating output files
  15. 15. @jamesbundey Using Grunt Watch to run my Grunt process and update files as I modify my theme
  16. 16. @jamesbundey Resources • Some great articles I’ve found useful • hard/ • grunt/ • development-deployments/
  17. 17. @jamesbundey Questions? CONNECT WITH ME @jamesbundey