Slide 1
Slide 1 text
Task Runners
An introduction to the world of front-end automation
Frontend NE - 02/07/2015
Slide 2
Slide 2 text
The web is evolving
And it's difficult to keep up
Growth of mobile
Performance
Bleeding edge
Compatibility
Slide 3
Slide 3 text
Old habits die hard
Your current process sucks
Laborious
Inefficient
Lack of control
Humans suck
Slide 4
Slide 4 text
Robots are
awesome
Slide 5
Slide 5 text
Automation wins
Save time and effort
Consistency
Maintainable
Processes are always ran
Slide 6
Slide 6 text
Automate all the things
The value of a task runner
Handles preprocessing (Sass, Less, PostCSS, CoffeeScript)
Concatenate and minify files
Autoprefix CSS
Asset compression
File linting
Live reloading
Slide 7
Slide 7 text
Class of 2015
Popular task runners
Plug-ins History
4,844* Sept 2011
1,532* June 2013
233* Nov 2013
*Figures accurate as of July 1, 2015
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Why Gulp?
Smaller, more efficient plug-ins
Built-in file watching functionality
JavaScript configuration files
Streams
Slide 10
Slide 10 text
Common tasks
Popular plugins for front-end engineers
gulp-sass
gulp-autoprefixer
gulp-minify-css
We'll look at an example that uses all three :)
Slide 11
Slide 11 text
Getting started
Install the necessary dependencies to get things going
b
r
e
w i
n
s
t
a
l
l n
o
d
e
n
p
m i
n
s
t
a
l
l -
g g
u
l
p
Slide 12
Slide 12 text
Add gulp to an existing project
n
p
m i
n
s
t
a
l
l g
u
l
p -
-
s
a
v
e
-
d
e
v
Create and prepare your gulpfile.js
t
o
u
c
h g
u
l
p
f
i
l
e
.
j
s
/
/ I
n
c
l
u
d
e g
u
l
p
v
a
r g
u
l
p = r
e
q
u
i
r
e
(
'
g
u
l
p
'
)
;
Slide 13
Slide 13 text
Production CSS with Gulp
Install the required task plug-ins
n
p
m i
n
s
t
a
l
l g
u
l
p
-
s
a
s
s -
-
s
a
v
e
-
d
e
v
n
p
m i
n
s
t
a
l
l g
u
l
p
-
a
u
t
o
p
r
e
f
i
x
e
r -
-
s
a
v
e
-
d
e
v
n
p
m i
n
s
t
a
l
l g
u
l
p
-
m
i
n
i
f
y
-
c
s
s -
-
s
a
v
e
-
d
e
v
Slide 14
Slide 14 text
Update the project includes
/
/ I
n
c
l
u
d
e p
l
u
g
-
i
n
s
v
a
r s
a
s
s = r
e
q
u
i
r
e
(
'
g
u
l
p
-
s
a
s
s
'
)
;
v
a
r a
u
t
o
p
r
e
f
i
x = r
e
q
u
i
r
e
(
'
g
u
l
p
-
a
u
t
o
p
r
e
f
i
x
e
r
'
)
;
v
a
r m
i
n
i
f
y = r
e
q
u
i
r
e
(
'
g
u
l
p
-
m
i
n
i
f
y
-
c
s
s
'
)
;
Slide 15
Slide 15 text
Define a new task
Write the Gulp task that'll do all the work for us
/
/ C
o
m
p
i
l
e .
s
c
s
s
, p
r
e
f
i
x p
r
o
p
e
r
t
i
e
s
, m
i
n
i
f
y t
h
e C
S
S
g
u
l
p
.
t
a
s
k
(
'
s
t
y
l
e
s
'
, f
u
n
c
t
i
o
n
(
) {
g
u
l
p
.
s
r
c
(
[
'
s
c
s
s
/
*
.
s
c
s
s
'
]
)
.
p
i
p
e
(
s
a
s
s
)
.
p
i
p
e
(
a
u
t
o
p
r
e
f
i
x
(
'
l
a
s
t 2 v
e
r
s
i
o
n
s
'
)
.
p
i
p
e
(
m
i
n
i
f
y
(
)
)
.
p
i
p
e
(
g
u
l
p
.
d
e
s
t
(
'
c
s
s
'
)
)
;
}
)
;
Run it!
/
/ R
u
n o
u
r C
S
S t
a
s
k
g
u
l
p s
t
y
l
e
s
Slide 16
Slide 16 text
There's more!
Slide 17
Slide 17 text
Default task
Because who wants to type unnecessary characters?
/
/ D
e
f
a
u
l
t g
u
l
p t
a
s
k
g
u
l
p
.
t
a
s
k
(
'
d
e
f
a
u
l
t
'
, [
'
s
t
y
l
e
s
'
]
)
;
Add multiple tasks
g
u
l
p
.
t
a
s
k
(
'
d
e
f
a
u
l
t
'
, [
'
s
t
y
l
e
s
'
, '
j
s
'
]
)
;
Build with one word
g
u
l
p
Slide 18
Slide 18 text
The watcher
Detect changes and rerun a task
/
/ W
a
t
c
h f
o
r .
s
c
s
s c
h
a
n
g
e
s
g
u
l
p
.
t
a
s
k
(
'
d
e
f
a
u
l
t
'
, [
'
s
t
y
l
e
s
'
]
, f
u
n
c
t
i
o
n
(
) {
g
u
l
p
.
w
a
t
c
h
(
'
s
c
s
s
/
*
.
s
c
s
s
'
, [
'
s
t
y
l
e
s
'
]
)
;
}
)
;
Slide 19
Slide 19 text
Final Gulpfile
v
a
r g
u
l
p = r
e
q
u
i
r
e
(
'
g
u
l
p
'
)
;
v
a
r s
a
s
s = r
e
q
u
i
r
e
(
'
g
u
l
p
-
s
a
s
s
'
)
;
v
a
r a
u
t
o
p
r
e
f
i
x = r
e
q
u
i
r
e
(
'
g
u
l
p
-
a
u
t
o
p
r
e
f
i
x
e
r
'
)
;
v
a
r m
i
n
i
f
y = r
e
q
u
i
r
e
(
'
g
u
l
p
-
m
i
n
i
f
y
-
c
s
s
'
)
;
g
u
l
p
.
t
a
s
k
(
'
s
t
y
l
e
s
'
, f
u
n
c
t
i
o
n
(
) {
g
u
l
p
.
s
r
c
(
[
'
s
c
s
s
/
*
.
s
c
s
s
'
]
)
.
p
i
p
e
(
s
a
s
s
)
.
p
i
p
e
(
a
u
t
o
p
r
e
f
i
x
( '
l
a
s
t 2 v
e
r
s
i
o
n
s
'
)
.
p
i
p
e
(
m
i
n
i
f
y
(
)
)
.
p
i
p
e
(
g
u
l
p
.
d
e
s
t
( '
c
s
s
'
)
)
;
}
)
;
g
u
l
p
.
t
a
s
k
(
'
d
e
f
a
u
l
t
'
, [
'
s
t
y
l
e
s
'
]
, f
u
n
c
t
i
o
n
(
) {
g
u
l
p
.
w
a
t
c
h
(
'
s
c
s
s
/
*
.
s
c
s
s
'
, [
'
s
t
y
l
e
s
'
]
)
;
}
)
;
Slide 20
Slide 20 text
Some pointers before you get stuck in
Automate your most inefficient tasks first
Invest time in your build process
The command line is your friend
Slide 21
Slide 21 text
:')