Task RunnersAn introduction to the world of front-end automation

Frontend NE - 02/07/2015

The web is evolvingAnd it's difficult to keep up

Growth of mobilePerformanceBleeding edgeCompatibility

Old habits die hardYour current process sucks

LaboriousInefficientLack of controlHumans suck

Robots areawesome

Automation winsSave time and effortConsistencyMaintainableProcesses are always ran

Automate all the thingsThe value of a task runner

Handles preprocessing (Sass, Less, PostCSS, CoffeeScript)Concatenate and minify filesAutoprefix CSSAsset compressionFile lintingLive reloading

Class of 2015Popular task runners

Plug-ins History

4,844* Sept 2011

1,532* June 2013

233* Nov 2013

*Figures accurate as of July 1, 2015

Why Gulp?Smaller, more efficient plug-insBuilt-in file watching functionalityJavaScript configuration filesStreams

Common tasksPopular plugins for front-end engineers

gulp-sassgulp-autoprefixergulp-minify-css

We'll look at an example that uses all three :)

Getting startedInstall the necessary dependencies to get things going

brew install nodenpm install -g gulp

Add gulp to an existing project

npm install gulp --save-dev

Create and prepare your gulpfile.js

touch gulpfile.js

// Include gulpvar gulp = require('gulp');

Production CSS with GulpInstall the required task plug-ins

npm install gulp-sass --save-devnpm install gulp-autoprefixer --save-devnpm install gulp-minify-css --save-dev

Update the project includes

// Include plug-insvar sass = require('gulp-sass');var autoprefix = require('gulp-autoprefixer');var minify = require('gulp-minify-css');

Define a new taskWrite the Gulp task that'll do all the work for us

// Compile .scss, prefix properties, minify the CSSgulp.task('styles', function() { gulp.src(['scss/*.scss']) .pipe(sass) .pipe(autoprefix('last 2 versions') .pipe(minify()) .pipe(gulp.dest('css'));});

Run it!

// Run our CSS taskgulp styles

There's more!

Default taskBecause who wants to type unnecessary characters?

// Default gulp taskgulp.task('default', ['styles']);

Add multiple tasks

gulp.task('default', ['styles', 'js']);

Build with one word

gulp

The watcherDetect changes and rerun a task

// Watch for .scss changesgulp.task('default', ['styles'], function() { gulp.watch('scss/*.scss', ['styles']);});

Final Gulpfilevar gulp = require('gulp');var sass = require('gulp-sass');var autoprefix = require('gulp-autoprefixer');var minify = require('gulp-minify-css');

gulp.task('styles', function() { gulp.src(['scss/*.scss']) .pipe(sass) .pipe(autoprefix( 'last 2 versions') .pipe(minify()) .pipe(gulp.dest( 'css'));});

gulp.task('default', ['styles'], function() { gulp.watch('scss/*.scss', ['styles']);});

Some pointers before you get stuck inAutomate your most inefficient tasks firstInvest time in your build processThe command line is your friend

:')