TAKE A GULP AT TASK AUTOMATION

DevTeach MtlJuly 2016

Joel Lord - Spiria

05/01/2023 3

@joel__lord

ABOUT ME Tinkerer Technology Enthusiast Javascript Junkie

05/01/2023 4

@joel__lord

AGENDA A bit of theory Demo and coding Q&A

05/01/2023 5

@joel__lord

WHAT IS GULP Gulp is a javascript task runner

05/01/2023 6

@joel__lord

WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks

05/01/2023 7

@joel__lord

WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks such as

05/01/2023 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

05/01/2023 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.

05/01/2023 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

05/01/2023 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

05/01/2023 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

05/01/2023 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

05/01/2023 14

@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 !

05/01/2023 15

@joel__lord

ALTERNATIVES TO GULP There are a lot of alternatives out there that you might have heard of

05/01/2023 16

@joel__lord

ALTERNATIVES TO GULP Grunt JS Bigger community More plugins Slower Configuration based tool to create tasks Lack of consistency between plugins

05/01/2023 17

@joel__lord

ALTERNATIVES TO GULP Broccoli JS Concise code Built in server Lacks documentation

05/01/2023 18

@joel__lord

ALTERNATIVES TO GULP Mimosa JS CLI tool Configuration based Limited set of recipes or plugins Smaller community

05/01/2023 19

@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

05/01/2023 20

@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

05/01/2023 21

@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

05/01/2023 22

@joel__lord

GULP APIgulp.task Create/define a taskgulp.src Read filesgulp.dest Write filesgulp.watch Watch for changes

05/01/2023 23

@joel__lord

GULP API

05/01/2023 24

@joel__lord

« MUST HAVE » PLUGINS Uglify Babelify Browserify (this is soooo spring ‘16) Sassify JS Hint (ify?)

05/01/2023 25

@joel__lord

GETTING STARTED Let’s get our hands dirty Starting from scratch, let’s install gulp and create a basic gulp file

05/01/2023 26

@joel__lord

INSTALLING GULP Make sure you have NodeJs installed Run in your terminal:

or> npm install --global gulp-cli

> sudo npm install --global gulp-cli

05/01/2023 27

@joel__lord

INSTALLING GULP Install gulp in your project devDependencies (you need a package.json file)

> npm install --save-dev gulp

05/01/2023 28

@joel__lord

INSTALLING GULP Create a gulpfile.js at the root of your project with the following code

var gulp = require('gulp');

gulp.task('default', function() { console.log('Task Started');});

05/01/2023 29

@joel__lord

INSTALLING GULP Run your gulp script

> 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

05/01/2023 30

@joel__lord

YOUR FIRST RECIPE Let’s do a gulp script that will do a lint on our JS code

> npm install --save-dev gulp-jshint

05/01/2023 31

@joel__lord

YOUR FIRST RECIPE Now let’s edit that gulpfile.js

var gulp = require("gulp");var jshint = require("gulp-jshint");

gulp.task("default", function() { return gulp.src(["index.js"]) .pipe(jshint()) .pipe(jshint.reporter("default"));});

05/01/2023 32

@joel__lord

YOUR FIRST RECIPE Run your gulp script

> 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

05/01/2023 33

@joel__lord

YOUR FIRST RECIPE And now, let’s remove the repetitive part of this.

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"));});

05/01/2023 34

@joel__lord

YOUR FIRST RECIPE Each time you save your files…

> 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

05/01/2023 35

@joel__lord

BEST PRACTICES In order to get the best out of Gulp, you should respect some of those best practices

05/01/2023 36

@joel__lord

USE NPM TO MANAGE DEPENDENCIES Always add a new plugin using

> npm install --save-dev <plugin-name>

05/01/2023 37

@joel__lord

USE NPM TO MANAGE DEPENDENCIES Keeps your packages.json file clean and up to date Makes sharing a lot easier (npm install)

05/01/2023 38

@joel__lord

SYNC VS ASYNC Calling an array of tasks will launch all of them

gulp.task("default", ["lint", "babel", "sass"]);

05/01/2023 39

@joel__lord

SYNC VS ASYNC You can launch them asynchronously

gulp.task("lint", function() { gulp.src(["index.js"]) .pipe(jshint()) .pipe(jshint.reporter("default"));});

05/01/2023 40

@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

05/01/2023 41

@joel__lord

SYNC VS ASYNC Returning the gulp object will cause it to be synchronous

gulp.task("lint", function() { return gulp.src(["index.js"]) .pipe(jshint()) .pipe(jshint.reporter("default"));});

05/01/2023 42

@joel__lord

SYNC VS ASYNC Or you can use the callback function

gulp.task("lint", function(cb) { gulp.src(["index.js"]) .pipe(jshint()) .pipe(jshint.reporter("default")); setTimeout(cb, 5000);});

05/01/2023 43

@joel__lord

COMPLEXIFYING THIS RECIPE Adding some plugins Let’s look at some real code

05/01/2023 48

@joel__lord

THANK YOU Questions?

Follow me on Twitter for the full slides and code samples @joel__lord

^- Yup, two underscores