Modern Front-end Tooling for WordPress Theme Development

Transcript

1. Modern Front-end Tooling for WordPress theme development Paul Cook @paulcookosu
2. By Day… The Ohio State University Technology Commercialization Office Software Prototyping - Rails, Nodejs, C++, Mobile By Night... Freelance Contractor Mostly Wordpress $ whoami Web Application Developer
3. Get Inspired
4. What is Software Tooling? Build automation Deployment Compiling code Debugging Revision control Code generation Source code formatting Static code analysis Test automation
5. Pitfalls?
6. Grunt The JavaScript Task Runner $ grunt
8. http://nodejs.org npm $ npm install -g yo
9. $ yo webapp
10. A package manager for the web { "name": "webapp", "dependencies": { "bootstrap-sass-official": "~3.1.0", "modernizr": "~2.6.2", "jquery": "~1.11.0" } } $ bower install
11. Yeoman Webapp ?
12. Demo
14. VagrantPress http://vagrantpress.org/
15. Gruntfile wp/wp-content/themes/your-theme
16. Watch & LiveReload
17. Variables Nesting Partials Mixins Inheritance Math operators
18. # Assignment: number = 42 opposite = true # Conditions: number = -42 if opposite # Functions: square = (x) -> x * x # Arrays: list = [1, 2, 3, 4, 5] # Objects: math = root: Math.sqrt square: square cube: (x) -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis? # Array comprehensions: cubes = (math.cube num for num in list)
19. Demo
20. Optimization $ grunt build
22. Optimization Image minification Compile Sass Autoprefix css Concatenate scripts and minify Create revisioned scripts, stylesheets and images for cache busting Rewrite html to use revisioned and concatenated scripts, stylesheets and images Minify html
23. Alternatives to Grunt MinQueue Minify & Concatenate Enqueued Scripts & Styles. Wordpress Plugin Forge Command line toolkit that generates code and compiles sass and coffeescript built for wordpress theme development. Ruby Gem Compass Open Source CSS authoring framework Ruby Gem
24. Thanks! More Resources: Google I/O 2012 - Better Web App Development Through Tooling by Paul Irish http://youtu.be/Mk-tFn2Ix6g