WordPress Workflows

and Gulp.jsLive-reloading SASS, JS, and PHP

whoami

Eli McMakin

English major, minor in design

From WA State

Building WordPress sites 3+ years

http://elimcmakin.com/

New Tech

“Things done changed.” – Programmer Notorious BIG

List of Tech

Node – https://nodejs.org/

NPM – https://www.npmjs.com/

Bower – http://bower.io/

SASS and LibSASS – http://sass-lang.com/libsass

BrowserSync – http://www.browsersync.io/

Zurb Foundation – http://foundation.zurb.com/

Gulp.js – http://gulpjs.com/

Um … That’s a lot

Pear it Down

Use jumpstart

My personal WordPress base

https://github.com/elimc/jumpstart

Removes a lot of the code you would need to learn

Branched from Underscores (official WordPress theme)

Uses Foundation, Gulp.js, Bower, Modernizr, and my

custom functions

Lost?

Let’s introduce each technology

Node

Basically, Chromes JavaScript interpreter that can be

ported anywhere

We’ll use it as a server

JS as a Server?

JavaScript Everywhere

Node is Chromes V8 engine

Allows running of JS anywhere (desktop, server, IOT,

Raspberry Pi, Drones, etc …)

NPM

Package Manager for Node

Similar to Bower, Composer, RubyGems, PIP/PyPI,

Maven, etc …

Package managers allow us to download other people’s

code and keep them updated

Bower

Install with NPM

I use it to update Foundation

That’s it

SASS

Syntactically Awesome Style Sheets

Tired of 8000 line CSS files? Abstract them with SASS

Allows variables, importing, nesting, and some other

things

Written in Ruby, originally

SASS Variables

Variables converted to correct CSS during compilation

Importing

Split ginourmous CSS files into something manageable

Nesting

Pre-compiled SASS

Nesting

Post-compiled CSS

LibSASS

We use it to compile SASS into CSS

Based on the Ruby SASS compiler, but written in C/C++

LibSASS

Major speed boost compared to Ruby SASS compile

The timings for processing a 200 KB file of plain CSS

(lower is better, http://www.solitr.com/blog/2014/01/css-

preprocessor-benchmark/):

• Sass: 4.9 sec

• Sass: 2.5 sec (with warm .sass-cache)

• libsass: 0.2 sec

BrowserSync

Live-reloads everything

BrowserSync in action: http://quick.as/az3sxrb

We will combine BrowserSync with Gulp.js

Zurb Foundation

Similar to Bootstrap

I use it to create grids quickly

But mostly, I use it for the JS modules

Don’t write code if you can use someone else’s

Good example is Off-Canvas module:

http://foundation.zurb.com/docs/components/offcanvas.ht

ml

Gulp.js

Basically, faster version of Grunt

Will run tasks for us

Run with BrowserSync to reload pages

Grunt Internals

Convert SASS to CSS and auto-prefix it for browser

compatibility

Files temporarily saved before next step

Gulp Internals

Convert SASS to CSS and auto-prefix it for browser

compatibility

Files “piped” like in Unix

After Putting jumpstart in your

themes directory …

1. Adjust the path of the browserSyncProxy variable in gulpfile.js.

2. Using the CLI, navigate to the root of your gulpfile.js file and enter npm install.

3. Wait for the node_modules to automatically install. Once installed, you won't have to run npm install for this site in the future.

4. Enter “gulp” in the CLI, without the quotes. This will start your node server, along with automattic SASS compiling.

5. That's it!

Jumpstart Step 1

Launch Apache server and MySQL database

Find the path to your WordPress install

Replace null with proper path

Set up Dependencies

Enter “npm install” in WP directory in Command Line

Interface

NPM will auto-download and set up modules

Watch Files

Choose files to monitor

For SASS, specify where to put CSS files

Init

Run tasks after “gulp” entered in Command Line

Live-Reload for PHP

When a watched PHP file is saved, we reload it in the

browser

I’ve never seen anyone else use this technique

Start it up!

Just enter Gulp in the CLI

That’s it

*Demonstrate Sexy Browser

Reloading Action

Receive wild applause and roses from crowd

Restarting Gulp

Sometimes gulp breaks if your PHP has compilation errors

Other random breaks

To restart Gulp:

1. Enter ^C in the CLI

2. Then enter “gulp” in the CLI

3. That’s it!

The Future

Instructions still too complex for new WordPress

Developer

Possible integration with Virtual Machine

Will allow one-line development setup with

Vagrant/Puppet

Would allow for handoff of projects to other team

members without needing to instruct them on setting up

their environment

Still exploratory

Thankyou