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