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