Automating Theme Development - LoopConf Edition

Take a tip from the machines and take away the tedious or otherwise painful parts of your theme development workflow via the latest automating tools and techniques. This session covers tools for each part of the theme development workflow ranging from CSS preprocessors like Sass to task runners like Grunt and Gulp.

Transcript

1. Automating Theme Development LoopConf 2015 Zoe Rooney @zoe_rooney
2. WHY WOULD I WANT TO AUTOMATE?
3. WHY WOULD I WANT TO AUTOMATE? WOULDN’T
4. HERD BEHAVIOR ROBOTS TAKING OVER
5. - B. F. Skinner “The real problem is not whether machines think but whether men do.”
6. 1. Make note of your process 2. Identify and replace points of pain or annoyance
7. TOO MUCH TO LEARN
8. - SirArthur C. Clarke “Any sufficiently advanced technology is indistinguishable from magic.”
9. HOW DO I AUTOMATE? PROJECT SETUP ACTIVE WORK DEPLOY CODE
10. HOW DO I AUTOMATE? PROJECT SETUP ACTIVE WORK DEPLOY CODE
11. 1. Find and replace; loooooong CSS files
 2. CanIUse-ing browser prefixes
 3. Optimize images; lint, organize, minify JS ACTIVE WORK
12. 1. Find and replace; loooooong CSS files
 2. CanIUse-ing browser prefixes
 3. Processing things like Sass, or running other tasks ACTIVE WORK
14. PARTIALS
15. PARTIALS NESTING
16. #primary { float: left; width: 600px; &.right { float: right; } &.full-width { float: none; width: 100%; } h1 { text-align: center; } }
17. PARTIALS NESTING VARIABLES
18. $bg: #fff; // Dimensions $max-width: 1100px; $side-padding: 15px; $max-outer-width: $width + $side-padding // Typography $main: 'Open Sans', sans-serif; $text: #333; // Media Queries $m: 880px; $s: 760px; $xs: 480px;
23. PACKAGE.JSON GULPFILE.JS
24. { "repository": { "type": "git", "url": "https://github.com/zoerooney/Emi" }, "dependencies": { "gulp": "*", "gulp-ruby-sass": "*", "gulp-autoprefixer": "*", "gulp-minify-css": "*", "gulp-livereload": "*" } }
25. gulpfile.js
26. $ gulp styles
27. $ gulp watch
28. HOW DO I AUTOMATE? PROJECT SETUP ACTIVE WORK DEPLOY CODE
29. 1. Get the starter theme (_s, Bones, Emi)
 2. Replace text strings throughout 3. Install tools via NPM PROJECT SETUP
30. 1. Get the starter theme (_s, Bones, Emi)
 2. Replace text strings throughout 3. Install tools via NPM PROJECT SETUP
31. YEOMAN.IO
32. theme-folder
33. index.js
34. HOW DO I AUTOMATE? PROJECT SETUP ACTIVE WORK DEPLOY CODE
35. 1. Push changes to version control
 2. Upload files to remote
 
 DEPLOYING
36. 1. Push changes to version control
 2. Upload files to remote
 
 DEPLOYING
37. $ git init $ git add -A $ git commit -m "initial commit" theme-folder
40. $ git commit -m "let's do this thing" $ git push
41. LEVEL UP
42. INSTALL ALL THE THINGS ‣ Node.js via nodejs.org ‣ Ruby (PC only, comes with Macs) ‣ Sass via sass-lang.com directions ‣ Git via instructions on git- scm.com ‣ Gulp via NPM ‣ Yeoman via NPM
43. GRAB A PROJECT AND PLAY AROUND
44. GRAB A PROJECT AND PLAY AROUND http://bit.ly/emi-theme
45. Automating is about replacing grunt work with magic. Slides @ http://bit.ly/loop-automate