This document provides an introduction to task runners and automation for front-end development. It discusses how task runners can automate tasks like preprocessing, concatenation, minification, and live reloading. Popular task runners like Gulp and their plugins are explained. The document then provides a step-by-step example of using Gulp to automate Sass compilation, autoprefixing, and CSS minification for a project.

1. Task Runners
An introduction to the world of front-end automation
Frontend NE - 02/07/2015

2. The web is evolving
And it's difficult to keep up
Growth of mobile
Performance
Bleeding edge
Compatibility

3. Old habits die hard
Your current process sucks
Laborious
Inefficient
Lack of control
Humans suck

4. Robots are
awesome

5. Automation wins
Save time and effort
Consistency
Maintainable
Processes are always ran

6. 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

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

9. Why Gulp?
Smaller, more efficient plug-ins
Built-in file watching functionality
JavaScript configuration files
Streams

10. 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 :)

11. Getting started
Install the necessary dependencies to get things going
brewinstallnode
npminstall-ggulp

12. Add gulp to an existing project
npminstallgulp--save-dev
Create and prepare your gulpfile.js
touchgulpfile.js
//Includegulp
vargulp=require('gulp');

13. Production CSS with Gulp
Install the required task plug-ins
npminstallgulp-sass--save-dev
npminstallgulp-autoprefixer--save-dev
npminstallgulp-minify-css--save-dev

14. Update the project includes
//Includeplug-ins
varsass=require('gulp-sass');
varautoprefix=require('gulp-autoprefixer');
varminify=require('gulp-minify-css');

15. Define a new task
Write the Gulp task that'll do all the work for us
//Compile.scss,prefixproperties,minifytheCSS
gulp.task('styles',function(){
gulp.src(['scss/*.scss'])
.pipe(sass)
.pipe(autoprefix('last2versions')
.pipe(minify())
.pipe(gulp.dest('css'));
});
Run it!
//RunourCSStask
gulpstyles

16. There's more!

17. Default task
Because who wants to type unnecessary characters?
//Defaultgulptask
gulp.task('default',['styles']);
Add multiple tasks
gulp.task('default',['styles','js']);
Build with one word
gulp

18. The watcher
Detect changes and rerun a task
//Watchfor.scsschanges
gulp.task('default',['styles'],function(){
gulp.watch('scss/*.scss',['styles']);
});

19. Final Gulpfile
vargulp=require('gulp');
varsass=require('gulp-sass');
varautoprefix=require('gulp-autoprefixer');
varminify=require('gulp-minify-css');
gulp.task('styles',function(){
gulp.src(['scss/*.scss'])
.pipe(sass)
.pipe(autoprefix( 'last2versions')
.pipe(minify())
.pipe(gulp.dest( 'css'));
});
gulp.task('default',['styles'],function(){
gulp.watch('scss/*.scss',['styles']);
});

20. 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

21. :')