Modernizing Your WordPress Workflow with Grunt & Bower

4,189 views

Published on

Modernizing Your WordPress Workflow with Grunt & Bower - WordCamp 2014 Atlanta presentation by Alan Crissey.

Published in: Technology

Modernizing Your WordPress Workflow with Grunt & Bower

  1. 1. MODERNIZING YOUR WORDPRESS WORKFLOW WITH GRUNT & BOWER
  2. 2. WHAT WE'LL COVER Getting used to the terminal Managing project plugins & frameworks with Bower Creating tasks in Grunt that will process our CSS, minify and concatenate our JavaScript, optimize images, and refresh our browser instantly
  3. 3. COMMON PROBLEMS FOR THEME DEVELOPERS HTML / Template Management CSS Management JavaScript Management CSS / JavaScript Concatenation / Minification Image Optimization Live Browser Updating Local Server Environment
  4. 4. TOOLS TO HELP WITH THESE PROBLEMS HAML, JADE, SLIM, Markdown LESS, SASS, Stylus CoffeeScript, LiveScript WordPress Plugins, GUI Apps - CodeKit, Koala, Hammer MAMP, LAMP, XAMPP
  5. 5. PROBLEMS BOWER SOLVES JavaScript Plugin / Framework Management & Updating
  6. 6. PROBLEMS GRUNT SOLVES All the Rest
  7. 7. GRUNT ADVANTAGES OVER GUIS Portable with Project Configurable for Multiple Environments (dev, dist) Every Detail is Customizable
  8. 8. FOLDER STRUCTURE hm tl / yu pbi fle / or ulc odr ast ses / teflsyuwl b eiig / h ie o il e dtn └ ls ─ es └ j ─ s └ ig ─ m bwrcmoet / hm t yu Bwrpcae oe_opnns / oe o or oe akgs nd_oue oemdls / hm t yu Nd pcae / oe o or oe akgs tp m / hlscnaeae j t ln / od octntd s o it bwrjo oe.sn / tels o yu Bwrpcae / h it f or oe akgs pcaejo akg.sn / tels o yu Nd pcae / h it f or oe akgs Gutiej rnfl.s / weeteGutmgchpes / hr h rn ai apn
  9. 9. TERMINAL SETUP FOR FUN++ 1. Get iTerm2. 2. Install OhMyZsh with cr - hts/rwgtu.o/obrselo-yzhmse/ol/ntl.h|s ul L tp:/a.ihbcmrbyusl/hm-s/atrtosisals h 3. Install Homebrew with rb - "(ul-sLhts/rwgtu.o/oerwhmbe/oisal uy e $cr fS tp:/a.ihbcmHmbe/oerwg/ntl) 4. Get Homebrew up to date and clean by running b e rw u d t and b e d c o , then add it to the path with pae rw otr epr PT=/s/oa/i:PT"> ~.ahpoie xot AH"urlclbn$AH > /bs_rfl 5. Install Node.js with b e i s a l n d rw ntl oe 6. Install the Grunt CLI with n m i s a l - g u t c i p ntl g rn-l 7. Install Bower with n m i s a l - b w r p ntl g oe
  10. 10. BOWER SETUP Create a file called b w r j o . oe.sn { "ae:"orpoetnm" nm" yu-rjc-ae, "eso" ".." vrin: 100, "eednis:{ dpnece" } }
  11. 11. GRUNT SETUP Create a file called p c a e j o . akg.sn { "ae:"orpoet, nm" yu-rjc" "eso" ".." vrin: 100, "eednis:{ dpnece" } }
  12. 12. GRUNT CONFIGURATION Create a file called G u t i e j . rnfl.s 's src' ue tit; mdl.xot =fnto (rn){ oueeprs ucin gut gutiiCni( rn.ntofg{ pg gutfl.edSN'akg.sn) k: rn.ieraJO(pcaejo', / pcaeotoswl g hr / akg pin il o ee }; ) / rgse tsshr / eitr ak ee gutrgseTs(dfut,[ rn.eitrak'eal' / dfutatosg hr / eal cin o ee ]; ) } ;
  13. 13. PACKAGES Get the Bower packages you want from their registry.
  14. 14. CSS PREPROCESSING You'll want the LESS, SASS, or some other package if your CSS preference is different. nmisalgutcnrbls -sv-e p ntl rn-oti-es -aedv or nmisalgutcnrbcmas-sv-e p ntl rn-oti-ops -aedv
  15. 15. JAVASCRIPT LINTING Get JSLint. nmisalgutjln -sv-e p ntl rn-sit -aedv
  16. 16. JAVASCRIPT FILE CONCATENATION You'll want this. nmisalgutcnrbcna -sv-e p ntl rn-oti-oct -aedv
  17. 17. JAVASCRIPT MINIFICATION Get Uglify. nmisalgutcnrbulf -sv-e p ntl rn-oti-giy -aedv
  18. 18. ERROR NOTIFICATIONS Try Grunt Notify. nmisalgutntf -sv-e p ntl rn-oiy -aedv
  19. 19. IMAGE OPTIMIZATION I like Imagemin. nmisalgutcnrbiaei -sv-e p ntl rn-oti-mgmn -aedv
  20. 20. LIVE UPDATING You want to use Watch. For updating CSS and JavaScript in the browser without refreshing the page, get the Chrome extension LiveReload. nmisalgutcnrbwth-sv-e p ntl rn-oti-ac -aedv
  21. 21. SERVER Want to set up a node.js server for your project and ditch MAMP? Get Express. For WordPress, you'll want the PHP version.
  22. 22. With the packages you want registered, the 'Load Tasks' section of your file should look something like this: / La tss / od ak gutlaNmak(gutcnrbcen) rn.odpTss'rn-oti-la'; gutlaNmak(gutcnrbjhn'; rn.odpTss'rn-oti-sit) gutlaNmak(gutcnrbcna'; rn.odpTss'rn-oti-oct) gutlaNmak(gutcnrbulf'; rn.odpTss'rn-oti-giy) gutlaNmak(gutntf'; rn.odpTss'rn-oiy) gutlaNmak(gutcnrbwth) rn.odpTss'rn-oti-ac'; gutlaNmak(gutcnrbiaei'; rn.odpTss'rn-oti-mgmn) gutlaNmak(gutcnrbcmas) rn.odpTss'rn-oti-ops';
  23. 23. CONFIGURING OPTIONS / pcaeotos / akg pin jhn:{ sit otos { pin: jhnr:'jhnr'/ jhn cni fl sitc .sitc / sit ofg ie } , al [ l: 'rnfl.s, Gutiej' 'sesj/.s ast/s*j' ] } , cna:{ oct bsc { ai: sc [ r: 'oe_opnnsjur/itjur.s, bwrcmoet/qeyds/qeyj' 'oe_opnnsfudto/sfudto/onainj' bwrcmoet/onainj/onainfudto.s, 'sesj/anj' ast/smi.s ] , ds:'m/p.s et tpapj' } , eta:{ xrs sc [ r: 'oe_opnnsmdrirmdrirj' bwrcmoet/oenz/oenz.s ] , ds:'m/oenz.s et tpmdrirj' } } , cmas { ops: ds:{ it otos { pin: cni:'ofgr' ofg cni.b
  24. 24. WATCH A sample configuration: wth { ac: cmas { ops: fls [ast/as*/.ss,as', ie: 'sesss/**{csss}] tss [cmas] ak: 'ops' } , cs { s: fls [pbi/ul/s/', ie: 'ulcbidcs*] otos { pin: lvrla:tu ieeod re } } , j:{ s fls [ ie: 'sesj/.s ast/s*j' ] , tss [cna' 'giy] ak: 'oct, ulf', otos { pin: lvrla:tu, ieeod re aBgn tu tei: re } } , iaei:{ mgmn fls [ ie: 'sesig*' ast/m/* ] , tss [iaei', ak: 'mgmn] otos { pin:
  25. 25. REGISTER DEFAULT TASKS / Rgse dfuttss / eitr eal ak gutrgseTs(dfut,[ rn.eitrak'eal' 'ac' wth ]; )
  26. 26. PUTTING IT ALL TOGETHER With all of these modules registered and configured, your Gruntfile.js should look something like this: 's src' ue tit; mdl.xot =fnto (rn){ oueeprs ucin gut gutiiCni( rn.ntofg{ pg gutfl.edSN'akg.sn) k: rn.ieraJO(pcaejo', / pcaeotos / akg pin jhn:{ sit otos { pin: jhnr:'jhnr' sitc .sitc } , al [ l: 'rnfl.s, Gutiej' 'm/s*j' tpj/.s ] } , cna:{ oct bsc { ai: sc [ r: 'oe_opnnsjur/itjur.s, bwrcmoet/qeyds/qeyj' 'oe_opnnsfudto/sfudto/onainj' bwrcmoet/onainj/onainfudto.s, 'sesj/anj' ast/smi.s ] , ds:'m/p.s et tpapj' } ,
  27. 27. GO PLAY

×