Download - Word press workflows and gulp
![Page 1: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/1.jpg)
WordPress Workflows
and Gulp.jsLive-reloading SASS, JS, and PHP
![Page 2: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/2.jpg)
whoami
Eli McMakin
English major, minor in design
From WA State
Building WordPress sites 3+ years
http://elimcmakin.com/
![Page 3: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/3.jpg)
New Tech
“Things done changed.” – Programmer Notorious BIG
![Page 4: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/4.jpg)
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/
![Page 5: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/5.jpg)
Um … That’s a lot
![Page 6: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/6.jpg)
Pear it Down
![Page 7: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/7.jpg)
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
![Page 8: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/8.jpg)
Lost?
Let’s introduce each technology
![Page 9: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/9.jpg)
Node
Basically, Chromes JavaScript interpreter that can be
ported anywhere
We’ll use it as a server
![Page 10: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/10.jpg)
JS as a Server?
![Page 11: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/11.jpg)
JavaScript Everywhere
Node is Chromes V8 engine
Allows running of JS anywhere (desktop, server, IOT,
Raspberry Pi, Drones, etc …)
![Page 12: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/12.jpg)
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
![Page 13: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/13.jpg)
Bower
Install with NPM
I use it to update Foundation
That’s it
![Page 14: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/14.jpg)
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
![Page 15: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/15.jpg)
SASS Variables
Variables converted to correct CSS during compilation
![Page 16: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/16.jpg)
Importing
Split ginourmous CSS files into something manageable
![Page 17: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/17.jpg)
Nesting
Pre-compiled SASS
![Page 18: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/18.jpg)
Nesting
Post-compiled CSS
![Page 19: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/19.jpg)
LibSASS
We use it to compile SASS into CSS
Based on the Ruby SASS compiler, but written in C/C++
![Page 20: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/20.jpg)
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
![Page 21: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/21.jpg)
BrowserSync
Live-reloads everything
BrowserSync in action: http://quick.as/az3sxrb
We will combine BrowserSync with Gulp.js
![Page 22: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/22.jpg)
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
![Page 23: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/23.jpg)
Gulp.js
Basically, faster version of Grunt
Will run tasks for us
Run with BrowserSync to reload pages
![Page 24: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/24.jpg)
Grunt Internals
Convert SASS to CSS and auto-prefix it for browser
compatibility
Files temporarily saved before next step
![Page 25: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/25.jpg)
Gulp Internals
Convert SASS to CSS and auto-prefix it for browser
compatibility
Files “piped” like in Unix
![Page 26: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/26.jpg)
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!
![Page 27: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/27.jpg)
Jumpstart Step 1
Launch Apache server and MySQL database
Find the path to your WordPress install
Replace null with proper path
![Page 28: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/28.jpg)
Set up Dependencies
Enter “npm install” in WP directory in Command Line
Interface
NPM will auto-download and set up modules
![Page 29: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/29.jpg)
Watch Files
Choose files to monitor
For SASS, specify where to put CSS files
![Page 30: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/30.jpg)
Init
Run tasks after “gulp” entered in Command Line
![Page 31: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/31.jpg)
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
![Page 32: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/32.jpg)
Start it up!
Just enter Gulp in the CLI
That’s it
![Page 33: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/33.jpg)
*Demonstrate Sexy Browser
Reloading Action
Receive wild applause and roses from crowd
![Page 34: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/34.jpg)
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!
![Page 35: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/35.jpg)
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
![Page 36: Word press workflows and gulp](https://reader030.vdocument.in/reader030/viewer/2022032421/55a77b491a28ab5f4e8b471c/html5/thumbnails/36.jpg)
Thankyou