MODERNIZING YOUR WORDPRESS WORKFLOW

WITH GRUNT & BOWER

WHAT WE'LL COVERGetting used to the terminalManaging project plugins & frameworks with BowerCreating tasks in Grunt that will process our CSS, minify andconcatenate our JavaScript, optimize images, and refresh ourbrowser instantly

COMMON PROBLEMSFOR THEME DEVELOPERS

HTML / Template ManagementCSS ManagementJavaScript ManagementCSS / JavaScript Concatenation / MinificationImage OptimizationLive Browser UpdatingLocal Server Environment

TOOLS TO HELP WITH THESE PROBLEMSHAML, JADE, SLIM, MarkdownLESS, SASS, StylusCoffeeScript, LiveScriptWordPress Plugins, GUI Apps - CodeKit, Koala, HammerMAMP, LAMP, XAMPP

PROBLEMS BOWER SOLVESJavaScript Plugin / Framework Management & Updating

PROBLEMS GRUNT SOLVESAll the Rest

GRUNT ADVANTAGES OVER GUISPortable with ProjectConfigurable for Multiple Environments (dev, dist)Every Detail is Customizable

FOLDER STRUCTUREhtml // your public folderassets // the files you will be editing└─ less└─ js└─ imgbower_components // home to your Bower packagesnode_modules // home to your Node packagestmp // holds concatenated js to lintbower.json // the list of your Bower packagespackage.json // the list of your Node packagesGruntfile.js // where the Grunt magic happens

TERMINAL SETUP FOR FUN++1. Get .2. Install with

3. Install with

4. Get Homebrew up to date and clean by running brewupdate and brew doctor, then add it to the path with

5. Install Node.js with brew install node6. Install the Grunt CLI with npm install -g grunt-cli7. Install Bower with npm install -g bower

iTerm2OhMyZsh

curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

Homebrewruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)

export PATH="/usr/local/bin:$PATH" >> ~/.bash_profile

BOWER SETUPCreate a file called bower.json.

{ "name": "your-project-name", "version": "1.0.0", "dependencies": { }}

GRUNT SETUPCreate a file called package.json.

{ "name": "your-project", "version": "1.0.0", "dependencies": {

}}

GRUNT CONFIGURATIONCreate a file called Gruntfile.js.

'use strict';module.exports = function (grunt) {

grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),

// package options will go here

});

// register tasks here grunt.registerTask('default', [ // default actions go here ]);

};

PACKAGESGet the Bower packages you want from their .registry

CSS PREPROCESSINGYou'll want the , , or some other package if your CSS

preference is different.LESS SASS

npm install grunt-contrib-less --save-dev

ornpm install grunt-contrib-compass --save-dev

JAVASCRIPT LINTINGGet .JSLint

npm install grunt-jslint --save-dev

JAVASCRIPT FILE CONCATENATIONYou'll want .this

npm install grunt-contrib-concat --save-dev

JAVASCRIPT MINIFICATIONGet .Uglify

npm install grunt-contrib-uglify --save-dev

ERROR NOTIFICATIONSTry .Grunt Notify

npm install grunt-notify --save-dev

IMAGE OPTIMIZATIONI like .Imagemin

npm install grunt-contrib-imagemin --save-dev

LIVE UPDATINGYou want to use . For updating CSS and JavaScript in the

browser without refreshing the page, get the Chrome extension.

Watch

LiveReloadnpm install grunt-contrib-watch --save-dev

For WordPress, you'll want the .

SERVERWant to set up a node.js server for your project and ditch

MAMP? Get .Express

PHP version

With the packages you want registered, the 'Load Tasks' sectionof your file should look something like this:

// Load tasksgrunt.loadNpmTasks('grunt-contrib-clean');grunt.loadNpmTasks('grunt-contrib-jshint');grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-notify');grunt.loadNpmTasks('grunt-contrib-watch');grunt.loadNpmTasks('grunt-contrib-imagemin');grunt.loadNpmTasks('grunt-contrib-compass');

CONFIGURING OPTIONS// package optionsjshint: { options: { jshintrc: '.jshintrc' // jshint config file }, all: [ 'Gruntfile.js', 'assets/js/*.js' ]},concat: { basic: { src: [ 'bower_components/jquery/dist/jquery.js', 'bower_components/foundation/js/foundation/foundation.js', 'assets/js/main.js' ], dest: 'tmp/app.js' }, extras: { src: [ 'bower_components/modernizr/modernizr.js' ], dest: 'tmp/modernizr.js' }},compass: { dist: { options: { config: 'config.rb'

WATCHA sample configuration:

watch: { compass: { files: ['assets/sass/**/*.{scss,sass}'], tasks: ['compass'] }, css: { files: ['public/build/css/*'], options: { livereload: true } }, js: { files: [ 'assets/js/*.js' ], tasks: ['concat', 'uglify'], options: { livereload: true, atBegin: true } }, imagemin: { files: [ 'assets/img/**' ], tasks: ['imagemin'], options: {

REGISTER DEFAULT TASKS// Register default tasksgrunt.registerTask('default', [ 'watch']);

PUTTING IT ALL TOGETHERWith all of these modules registered and configured, your

Gruntfile.js should look something like this:'use strict';module.exports = function (grunt) {

grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),

// package options jshint: { options: { jshintrc: '.jshintrc' }, all: [ 'Gruntfile.js', 'tmp/js/*.js' ] }, concat: { basic: { src: [ 'bower_components/jquery/dist/jquery.js', 'bower_components/foundation/js/foundation/foundation.js', 'assets/js/main.js' ], dest: 'tmp/app.js' },

GO PLAY