The Ultimate WordPress Workflow

to Create Websites of the Future

Browser sync, gulp, SASS, Vagrant, and other goodies

We’ll code it live!

Three Repos Covered

jumpstart – My personal base for WordPress

jumpstart-install-script – Bash script to load jumpstart

jVVV – jumpstart with Varying Vagrant Vagrants

Find all three – https://github.com/elimc?tab=repositories

Demonstrate Sexy Synching Action …

List of Tech

Node – https://nodejs.org/

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

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

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

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

Vagrant – https://www.vagrantup.com/

BrowserSync

Live-reloads everything on any device anywhere

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

We combine Browsersync with Gulp.js

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

Restarting Gulp

Sometimes gulp breaks if your PHP has compilation errors

To restart Gulp:

1. Enter ^C in the CLI

2. Then enter “gulp” in the CLI

The Future

Gulp 4.0 will fix many compilation errors

Vagrant can combined with automatic DB backups

Possible integration with deployment scripts?

DevOps is a super active area!

Thankyou