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

1. MODERNIZING YOUR WORDPRESS WORKFLOW
WITH GRUNT & BOWER

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. 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. 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. PROBLEMS BOWER SOLVES
JavaScript Plugin / Framework Management & Updating

6. PROBLEMS GRUNT SOLVES
All the Rest

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

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. 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. 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. 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. 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. PACKAGES
Get the Bower packages you want from their registry.

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. JAVASCRIPT LINTING
Get JSLint.
nmisalgutjln -sv-e
p ntl rn-sit -aedv

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

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

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

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

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. 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. 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. 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. 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. REGISTER DEFAULT TASKS
/ Rgse dfuttss
/ eitr eal ak
gutrgseTs(dfut,[
rn.eitrak'eal'
'ac'
wth
];
)

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. GO PLAY