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 - http://bit.ly/1q1x1bD

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 - You’re 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 <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. @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 <package git name> --save
bower install <package git name> --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 I’ve 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