WordPress workflow of the future
?Download as PPTX, PDF?
0 likes?1,274 views
This document discusses a WordPress workflow that uses Browsersync, Gulp, SASS, Vagrant and other tools to create websites of the future. It demonstrates how Browsersync can live-reload pages on any device, and how Gulp is used with Browsersync to convert SASS to CSS and automatically prefix files for browser compatibility. Finally, it outlines potential future integrations like using Vagrant for database backups and deployment scripts.
WordPress workflow of the future
- 1. The Ultimate WordPress Workflow to Create Websites of the Future Browser sync, gulp, SASS, Vagrant, and other goodies
- 2. We¨ll code it live!
- 3. Three Repos Covered jumpstart C My personal base for WordPress jumpstart-install-script C Bash script to load jumpstart jVVV C jumpstart with Varying Vagrant Vagrants Find all three C https://github.com/elimc?tab=repositories
- 5. List of Tech Node C https://nodejs.org/ NPM C https://www.npmjs.com/ SASS and LibSASS C http://sass-lang.com/libsass Browsersync C http://www.browsersync.io/ Gulp.js C http://gulpjs.com/ Vagrant C https://www.vagrantup.com/
- 6. BrowserSync Live-reloads everything on any device anywhere Browsersync in action: http://quick.as/az3sxrb We combine Browsersync with Gulp.js
- 7. Gulp.js Basically, faster version of Grunt Will run tasks for us Run with Browsersync to reload pages
- 8. Grunt Internals Convert SASS to CSS and auto-prefix it for browser compatibility Files temporarily saved before next step
- 9. Gulp Internals Convert SASS to CSS and auto-prefix it for browser compatibility Files ＾piped￣ like in Unix
- 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. 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. Thankyou