Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
jV...
Demonstrate Sexy Synching
Action …
List of Tech
Node – https://nodejs.org/
NPM – https://www.npmjs.com/
SASS and LibSASS – http://sass-lang.com/libsass
Brows...
BrowserSync
Live-reloads everything on any device anywhere
Browsersync in action: http://quick.as/az3sxrb
We combine Brows...
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 e...
The Future
Gulp 4.0 will fix many compilation errors
Vagrant can combined with automatic DB backups
Possible integration w...
Thankyou
Upcoming SlideShare
Loading in …5
×

WordPress workflow of the future

1,028 views

Published on

Get WordPress Working Cross Browser with Browsersync.

  • Be the first to comment

  • Be the first to like this

WordPress workflow of the future

  1. 1. The Ultimate WordPress Workflow to Create Websites of the Future Browser sync, gulp, SASS, Vagrant, and other goodies
  2. 2. We’ll code it live!
  3. 3. 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
  4. 4. Demonstrate Sexy Synching Action …
  5. 5. 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/
  6. 6. BrowserSync Live-reloads everything on any device anywhere Browsersync in action: http://quick.as/az3sxrb We combine Browsersync with Gulp.js
  7. 7. Gulp.js Basically, faster version of Grunt Will run tasks for us Run with Browsersync to reload pages
  8. 8. Grunt Internals Convert SASS to CSS and auto-prefix it for browser compatibility Files temporarily saved before next step
  9. 9. Gulp Internals Convert SASS to CSS and auto-prefix it for browser compatibility Files “piped” like in Unix
  10. 10. 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
  11. 11. 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!
  12. 12. Thankyou

×