TAKE A GULP AT TASK
AUTOMATION
DevTeach Mtl
July 2016
Joel Lord - Spiria

@joel__lord
ABOUT ME
Tinkerer
Technology Enthusiast
Javascript Junkie
7/9/2016 3

@joel__lord
AGENDA
A bit of theory
Demo and coding
Q&A
7/9/2016 4

@joel__lord
WHAT IS GULP
Gulp is a javascript task runner
7/9/2016 5

@joel__lord
WHAT IS GULP
Gulp is a javascript task runner
It helps developers with task repetitive tasks
7/9/2016 6

@joel__lord
WHAT IS GULP
Gulp is a javascript task runner
It helps developers with task repetitive tasks such as
7/9/2016 7

@joel__lord
WHAT IS GULP
Gulp is a javascript task runner
It helps developers with task repetitive tasks such as
 Bundling and minifying libraries and stylesheets
7/9/2016 8

@joel__lord
WHAT IS GULP
Gulp is a javascript task runner
It helps developers with task repetitive tasks such as
 Bundling and minifying libraries and stylesheets
 Refreshing your browser when you save a file.
7/9/2016 9

@joel__lord
WHAT IS GULP
Gulp is a javascript task runner
It helps developers with task repetitive tasks such as
 Bundling and minifying libraries and stylesheets
 Refreshing your browser when you save a file.
 Quickly running unit tests
7/9/2016 10

@joel__lord
WHAT IS GULP
Gulp is a javascript task runner
It helps developers with task repetitive tasks such as
 Bundling and minifying libraries and stylesheets
 Refreshing your browser when you save a file.
 Quickly running unit tests
 Running code analysis
7/9/2016 11

@joel__lord
WHAT IS GULP
Gulp is a javascript task runner
It helps developers with task repetitive tasks such as
 Bundling and minifying libraries and stylesheets
 Refreshing your browser when you save a file.
 Quickly running unit tests
 Running code analysis
 Less/Sass to CSS compilation
7/9/2016 12

@joel__lord
WHAT IS GULP
Gulp is a javascript task runner
It helps developers with task repetitive tasks such as
 Bundling and minifying libraries and stylesheets
 Refreshing your browser when you save a file.
 Quickly running unit tests
 Running code analysis
 Less/Sass to CSS compilation
 Copying modified files to an output directory
7/9/2016 13

@joel__lord
WHAT IS GULP
Gulp is a javascript task runner
It helps developers with task repetitive tasks such as
 Bundling and minifying libraries and stylesheets
 Refreshing your browser when you save a file.
 Quickly running unit tests
 Running code analysis
 Less/Sass to CSS compilation
 Copying modified files to an output directory
Anything that you do every time you change a file !
7/9/2016 14

@joel__lord
ALTERNATIVES TO GULP
There are a lot of alternatives out there that you might have heard of
7/9/2016 15

@joel__lord
ALTERNATIVES TO GULP
Grunt JS
 Bigger community
 More plugins
 Slower
 Configuration based tool to create tasks
 Lack of consistency between plugins
7/9/2016 16

@joel__lord
ALTERNATIVES TO GULP
Broccoli JS
 Concise code
 Built in server
 Lacks documentation
7/9/2016 17

@joel__lord
ALTERNATIVES TO GULP
Mimosa JS
 CLI tool
 Configuration based
 Limited set of recipes or plugins
 Smaller community
7/9/2016 18

@joel__lord
AND WHAT ABOUT GULP
Gulp JS
 My personal favorite
 Uses stream so better i/o performance
 Very simple syntax
 Large community and ecosystem
7/9/2016 19

@joel__lord
HOW IT WORKS
You create a named task that you would like gulp to accomplish
You load a set of files into the gulp stream
Plugins will (potentially) do modifications to the files
The file(s) are sent to a destination
7/9/2016 20

@joel__lord
STREAMS 101
“The main tool in node's evented toolbox is the Stream. Stream
instances are basically Unix pipes. They can be readable, writable or
both and are easy to reason about -- you can pipe a readable stream
to a writable stream by doing readableStream.pipe(writableStream).”
-NodeJs Documentation
7/9/2016 21

@joel__lord
GULP API
gulp.task Create/define a task
gulp.src Read files
gulp.dest Write files
gulp.watch Watch for changes
7/9/2016 22

@joel__lord
GULP API
7/9/2016 23

@joel__lord
« MUST HAVE » PLUGINS
Uglify
Babelify
Browserify (this is soooo spring ‘16)
Sassify
JS Hint (ify?)
7/9/2016 24

@joel__lord
GETTING STARTED
Let’s get our hands dirty
Starting from scratch, let’s install gulp and create a basic gulp file
7/9/2016 25

@joel__lord
INSTALLING GULP
Make sure you have NodeJs installed
Run in your terminal:
or
7/9/2016 26
> npm install --global gulp-cli
> sudo npm install --global gulp-cli

@joel__lord
INSTALLING GULP
Install gulp in your project devDependencies (you need a
package.json file)
7/9/2016 27
> npm install --save-dev gulp

@joel__lord
INSTALLING GULP
Create a gulpfile.js at the root of your project with the following code
7/9/2016 28
var gulp = require('gulp');
gulp.task('default', function() {
console.log('Task Started');
});

@joel__lord
INSTALLING GULP
Run your gulp script
7/9/2016 29
> gulp
[09:40:24] Using gulpfile ~/Documents/Projects/gulpfile.js
[09:40:24] Starting 'default'...
Task Started
[09:40:24] Finished 'default' after 102 μs

@joel__lord
YOUR FIRST RECIPE
Let’s do a gulp script that will do a lint on our JS code
7/9/2016 30
> npm install --save-dev gulp-jshint

@joel__lord
YOUR FIRST RECIPE
Now let’s edit that gulpfile.js
7/9/2016 31
var gulp = require("gulp");
var jshint = require("gulp-jshint");
gulp.task("default", function() {
return gulp.src(["index.js"])
.pipe(jshint())
.pipe(jshint.reporter("default"));
});

@joel__lord
YOUR FIRST RECIPE
Run your gulp script
7/9/2016 32
> gulp
[10:16:39] Using gulpfile ~/Documents/Projects/gulp_intro/gulpfile.js
[10:16:39] Starting 'default'...
index.js: line 1, col 62, Missing semicolon.
1 error
[10:16:39] Finished 'default' after 28 ms

@joel__lord
YOUR FIRST RECIPE
And now, let’s remove the repetitive part of this.
7/9/2016 33
var gulp = require("gulp");
var jshint = require("gulp-jshint");
gulp.task("default", function() {
gulp.watch("**/*.js", ["lint"]);
});
gulp.task("lint", function() {
return gulp.src(["index.js"])
.pipe(jshint())
.pipe(jshint.reporter("default"));
});

@joel__lord
YOUR FIRST RECIPE
Each time you save your files…
7/9/2016 34
> gulp
[10:49:51] Using gulpfile ~/Documents/Projects/gulp_intro/gulpfile.js
[10:49:51] Starting 'default'...
[10:49:56] Finished 'default' after 5.24 s
[10:50:00] Starting 'lint'...
index.js: line 1, col 62, Missing semicolon.
1 error
[10:50:00] Finished 'lint' after 32 ms
[10:50:06] Starting 'lint'...
[10:50:06] Finished 'lint' after 5.06 ms

@joel__lord
BEST PRACTICES
In order to get the best out of Gulp, you should respect some of
those best practices
7/9/2016 35

@joel__lord
USE NPM TO MANAGE
DEPENDENCIES
Always add a new plugin using
7/9/2016 36
> npm install --save-dev <plugin-name>

@joel__lord
USE NPM TO MANAGE
DEPENDENCIES
Keeps your packages.json file clean and up to date
Makes sharing a lot easier (npm install)
7/9/2016 37

@joel__lord
SYNC VS ASYNC
Calling an array of tasks will launch all of them
7/9/2016 38
gulp.task("default", ["lint", "babel", "sass"]);

@joel__lord
SYNC VS ASYNC
You can launch them asynchronously
7/9/2016 39
gulp.task("lint", function() {
gulp.src(["index.js"])
.pipe(jshint())
.pipe(jshint.reporter("default"));
});

@joel__lord
SYNC VS ASYNC
But you might need them to be synchronous
 Running an uglify should be done after a concatenation
 Minifiers should be executed after transpilers
7/9/2016 40

@joel__lord
SYNC VS ASYNC
Returning the gulp object will cause it to be synchronous
7/9/2016 41
gulp.task("lint", function() {
return gulp.src(["index.js"])
.pipe(jshint())
.pipe(jshint.reporter("default"));
});

@joel__lord
SYNC VS ASYNC
Or you can use the callback function
7/9/2016 42
gulp.task("lint", function(cb) {
gulp.src(["index.js"])
.pipe(jshint())
.pipe(jshint.reporter("default"));
setTimeout(cb, 5000);
});

@joel__lord
COMPLEXIFYING THIS RECIPE
Adding some plugins
Let’s look at some real code
7/9/2016 43

@joel__lord
THANK YOU
7/9/2016 48
Questions?
Follow me on Twitter for the full slides and code samples
@joel__lord
^- Yup, two underscores