Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

WordPress workflow of the future

1.070 Aufrufe

Veröffentlicht am

Get WordPress Working Cross Browser with Browsersync.

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×