Modernizing Your WordPress Workflow with Grunt & Bower

0 %
100 %
Information about Modernizing Your WordPress Workflow with Grunt & Bower
Technology

Published on March 10, 2014

Author: alancrissey

Source: slideshare.net

Description

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

MODERNIZING YOUR WORDPRESS WORKFLOW WITH GRUNT & BOWER

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

COMMON PROBLEMS FOR THEME DEVELOPERS HTML / Template Management CSS Management JavaScript Management CSS / JavaScript Concatenation / Minification Image Optimization Live Browser Updating Local Server Environment

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

PROBLEMS BOWER SOLVES JavaScript Plugin / Framework Management & Updating

PROBLEMS GRUNT SOLVES All the Rest

GRUNT ADVANTAGES OVER GUIS Portable with Project Configurable for Multiple Environments (dev, dist) Every Detail is Customizable

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

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

BOWER SETUP Create a file called b w r j o . oe.sn { "ae:"orpoetnm" nm" yu-rjc-ae, "eso" ".." vrin: 100, "eednis:{ dpnece" } }

GRUNT SETUP Create a file called p c a e j o . akg.sn { "ae:"orpoet, nm" yu-rjc" "eso" ".." vrin: 100, "eednis:{ dpnece" } }

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 ]; ) } ;

PACKAGES Get the Bower packages you want from their registry.

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

JAVASCRIPT LINTING Get JSLint. nmisalgutjln -sv-e p ntl rn-sit -aedv

JAVASCRIPT FILE CONCATENATION You'll want this. nmisalgutcnrbcna -sv-e p ntl rn-oti-oct -aedv

JAVASCRIPT MINIFICATION Get Uglify. nmisalgutcnrbulf -sv-e p ntl rn-oti-giy -aedv

ERROR NOTIFICATIONS Try Grunt Notify. nmisalgutntf -sv-e p ntl rn-oiy -aedv

IMAGE OPTIMIZATION I like Imagemin. nmisalgutcnrbiaei -sv-e p ntl rn-oti-mgmn -aedv

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

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.

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';

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

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:

REGISTER DEFAULT TASKS / Rgse dfuttss / eitr eal ak gutrgseTs(dfut,[ rn.eitrak'eal' 'ac' wth ]; )

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' } ,

GO PLAY

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Modernizing Your Web Workflow with Grunt and Bower

Modernizing Your Web Workflow with Grunt and Bower. Nov 3, 2015. Read more. Getting Started with Jekyll on Ubuntu 14.04 LTS. Nov 3, 2015. Read more.
Read more

YEOMAN TUTORIAL - Master Front-End Workflow with Yeoman ...

YEOMAN TUTORIAL - Master Front-End Workflow with Yeoman, ... If you're a front-end developer and you don't use Yeoman, Grunt and Bower, ...
Read more

#2 WordPress Themes erstellen - Installation von NodeJS ...

In diesem Teil der Reihe "WordPress Theme erstellen" geht es um die Installation von NodeJS, Grunt, ... Grunt, Bower und LiveReload.
Read more

A Smarter WordPress Theme Design & Development Workflow

A Smarter WordPress Theme Design & Development Workflow with node.js, ruby, sass, bower and grunt. Home; ... Grunt can also help you release a clean ...
Read more

Using Bower To Improve WordPress Development - Envato ...

Using Bower To Improve WordPress Development. ... If you are using Grunt for your build tasks, ... I talked about ways that Bower can help your WordPress ...
Read more

Using Grunt for WordPress Theme Development and Deployments

How to setup Grunt to optimize and speed up your WordPress theme ... linting in your development workflow, ... Using Grunt for WordPress Theme ...
Read more

grunt-bowercopy - npm

Options options.srcPrefix. Type: String Default value: The directory property value in your .bowerrc or 'bower_components' if the .bowerrc cannot be found.
Read more

Bower - Documents

... Grunt, RequireJS, Bower and other Tools Optimising Your Front End Workflow With Symfony, ... Modernizing Your WordPress Workflow with Grunt & Bower.
Read more