SlideShare a Scribd company logo
1 of 43
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

More Related Content

What's hot

Angular workflow with gulp.js
Angular workflow with gulp.jsAngular workflow with gulp.js
Angular workflow with gulp.jsCihad Horuzoğlu
 
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.jsBo-Yi Wu
 
MeCab in docker action(OpenWhisk)
MeCab in docker action(OpenWhisk)MeCab in docker action(OpenWhisk)
MeCab in docker action(OpenWhisk)KUNITO Atsunori
 
Develop - Project Scaffolding
Develop - Project ScaffoldingDevelop - Project Scaffolding
Develop - Project ScaffoldingKevin Cao
 
Google apps script introduction
Google apps script introductionGoogle apps script introduction
Google apps script introductionKAI CHU CHUNG
 
Docker, Ansible and Symfony micro-kernel
Docker, Ansible and Symfony micro-kernelDocker, Ansible and Symfony micro-kernel
Docker, Ansible and Symfony micro-kernelDrupalCamp Kyiv
 
Java to Golang: An intro by Ryan Dawson Seldon.io
Java to Golang: An intro by Ryan Dawson Seldon.ioJava to Golang: An intro by Ryan Dawson Seldon.io
Java to Golang: An intro by Ryan Dawson Seldon.ioMauricio (Salaboy) Salatino
 
Universal groovy
Universal groovyUniversal groovy
Universal groovyShin-Jan Wu
 
Javascript in Linux Desktop
Javascript in Linux DesktopJavascript in Linux Desktop
Javascript in Linux DesktopYuren Ju
 
Building a Drupal site with Git
Building a Drupal site with GitBuilding a Drupal site with Git
Building a Drupal site with Gitdirtytactics
 

What's hot (20)

Angular workflow with gulp.js
Angular workflow with gulp.jsAngular workflow with gulp.js
Angular workflow with gulp.js
 
Gulp: Task Runner
Gulp: Task RunnerGulp: Task Runner
Gulp: Task Runner
 
Gulp - The Streaming Build System
Gulp - The Streaming Build SystemGulp - The Streaming Build System
Gulp - The Streaming Build System
 
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.js
 
Grooscript and Grails 3
Grooscript and Grails 3Grooscript and Grails 3
Grooscript and Grails 3
 
JavaScript Task Runners - Gulp & Grunt
JavaScript Task Runners - Gulp & GruntJavaScript Task Runners - Gulp & Grunt
JavaScript Task Runners - Gulp & Grunt
 
MeCab in docker action(OpenWhisk)
MeCab in docker action(OpenWhisk)MeCab in docker action(OpenWhisk)
MeCab in docker action(OpenWhisk)
 
Develop - Project Scaffolding
Develop - Project ScaffoldingDevelop - Project Scaffolding
Develop - Project Scaffolding
 
Google apps script introduction
Google apps script introductionGoogle apps script introduction
Google apps script introduction
 
Social Coding GitHub 2015
Social Coding GitHub 2015Social Coding GitHub 2015
Social Coding GitHub 2015
 
Docker, Ansible and Symfony micro-kernel
Docker, Ansible and Symfony micro-kernelDocker, Ansible and Symfony micro-kernel
Docker, Ansible and Symfony micro-kernel
 
From MVP to a Product
From MVP to a ProductFrom MVP to a Product
From MVP to a Product
 
BDD: Behind the Scenes
BDD: Behind the ScenesBDD: Behind the Scenes
BDD: Behind the Scenes
 
Java to Golang: An intro by Ryan Dawson Seldon.io
Java to Golang: An intro by Ryan Dawson Seldon.ioJava to Golang: An intro by Ryan Dawson Seldon.io
Java to Golang: An intro by Ryan Dawson Seldon.io
 
Grunt.js introduction
Grunt.js introductionGrunt.js introduction
Grunt.js introduction
 
Universal groovy
Universal groovyUniversal groovy
Universal groovy
 
Javascript in Linux Desktop
Javascript in Linux DesktopJavascript in Linux Desktop
Javascript in Linux Desktop
 
Building a Drupal site with Git
Building a Drupal site with GitBuilding a Drupal site with Git
Building a Drupal site with Git
 
Chef training Day5
Chef training Day5Chef training Day5
Chef training Day5
 
Go at Openprovider
Go at OpenproviderGo at Openprovider
Go at Openprovider
 

Viewers also liked

Max Photography Portfolio_low res
Max Photography Portfolio_low resMax Photography Portfolio_low res
Max Photography Portfolio_low resMaxine Lister
 
Guía de Aprendizaje Microsoft Power Point
Guía de Aprendizaje Microsoft Power PointGuía de Aprendizaje Microsoft Power Point
Guía de Aprendizaje Microsoft Power PointKathleen Asprilla
 
estense.com - 22 Novembre 2015
estense.com - 22 Novembre 2015estense.com - 22 Novembre 2015
estense.com - 22 Novembre 2015futurpera
 
Nubia bayona alvarez, actividad 1. mapaconceptual.
Nubia bayona alvarez, actividad 1. mapaconceptual.Nubia bayona alvarez, actividad 1. mapaconceptual.
Nubia bayona alvarez, actividad 1. mapaconceptual.Nubia Bayona
 
A Hidden Markov Model Library
A Hidden Markov Model LibraryA Hidden Markov Model Library
A Hidden Markov Model LibraryPeter Bleackley
 
Guía de uso idendismemo
Guía de uso  idendismemoGuía de uso  idendismemo
Guía de uso idendismemoCrisanferragut
 
интеллектуальный регистратор авторских прав Ireg
интеллектуальный регистратор авторских прав Iregинтеллектуальный регистратор авторских прав Ireg
интеллектуальный регистратор авторских прав IregIntellectualRegistrator
 
Sparky’s Fantasia
Sparky’s FantasiaSparky’s Fantasia
Sparky’s FantasiaTalal Idlibi
 
S.O.L.I.D. Software-Engineering Principles - a must know for developers
S.O.L.I.D. Software-Engineering Principles - a must know for developersS.O.L.I.D. Software-Engineering Principles - a must know for developers
S.O.L.I.D. Software-Engineering Principles - a must know for developersProf. Dr. Roland Petrasch
 
Optimization of friction stir welding parameters for joining aluminum alloy 6...
Optimization of friction stir welding parameters for joining aluminum alloy 6...Optimization of friction stir welding parameters for joining aluminum alloy 6...
Optimization of friction stir welding parameters for joining aluminum alloy 6...eSAT Journals
 
How to Achieve Better Facade Illumination
How to Achieve Better Facade IlluminationHow to Achieve Better Facade Illumination
How to Achieve Better Facade IlluminationJ.S. Cotney, Inc.
 
Acuerdo pedagogico opcion de grado nivel tecnico creacion de empresa castilla...
Acuerdo pedagogico opcion de grado nivel tecnico creacion de empresa castilla...Acuerdo pedagogico opcion de grado nivel tecnico creacion de empresa castilla...
Acuerdo pedagogico opcion de grado nivel tecnico creacion de empresa castilla...Maribel Gaviria Castiblanco
 
θυμός
θυμός  θυμός
θυμός adoniou
 
Experimental Investigation of Wear Properties of Aluminium LM25 Red Mud Metal...
Experimental Investigation of Wear Properties of Aluminium LM25 Red Mud Metal...Experimental Investigation of Wear Properties of Aluminium LM25 Red Mud Metal...
Experimental Investigation of Wear Properties of Aluminium LM25 Red Mud Metal...IJSRD
 
Descubra Seus Pontos Fortes (por Dario Kosugi)
Descubra Seus Pontos Fortes (por Dario Kosugi)Descubra Seus Pontos Fortes (por Dario Kosugi)
Descubra Seus Pontos Fortes (por Dario Kosugi)Dario Kosugi
 

Viewers also liked (20)

Max Photography Portfolio_low res
Max Photography Portfolio_low resMax Photography Portfolio_low res
Max Photography Portfolio_low res
 
Velocidad de-escape
Velocidad de-escapeVelocidad de-escape
Velocidad de-escape
 
Guía de Aprendizaje Microsoft Power Point
Guía de Aprendizaje Microsoft Power PointGuía de Aprendizaje Microsoft Power Point
Guía de Aprendizaje Microsoft Power Point
 
estense.com - 22 Novembre 2015
estense.com - 22 Novembre 2015estense.com - 22 Novembre 2015
estense.com - 22 Novembre 2015
 
Nubia bayona alvarez, actividad 1. mapaconceptual.
Nubia bayona alvarez, actividad 1. mapaconceptual.Nubia bayona alvarez, actividad 1. mapaconceptual.
Nubia bayona alvarez, actividad 1. mapaconceptual.
 
A Hidden Markov Model Library
A Hidden Markov Model LibraryA Hidden Markov Model Library
A Hidden Markov Model Library
 
το σπιτακι
το σπιτακιτο σπιτακι
το σπιτακι
 
Guía de uso idendismemo
Guía de uso  idendismemoGuía de uso  idendismemo
Guía de uso idendismemo
 
Trabajo practico N 8
Trabajo practico N 8Trabajo practico N 8
Trabajo practico N 8
 
интеллектуальный регистратор авторских прав Ireg
интеллектуальный регистратор авторских прав Iregинтеллектуальный регистратор авторских прав Ireg
интеллектуальный регистратор авторских прав Ireg
 
Sparky’s Fantasia
Sparky’s FantasiaSparky’s Fantasia
Sparky’s Fantasia
 
S.O.L.I.D. Software-Engineering Principles - a must know for developers
S.O.L.I.D. Software-Engineering Principles - a must know for developersS.O.L.I.D. Software-Engineering Principles - a must know for developers
S.O.L.I.D. Software-Engineering Principles - a must know for developers
 
deber
deberdeber
deber
 
Optimization of friction stir welding parameters for joining aluminum alloy 6...
Optimization of friction stir welding parameters for joining aluminum alloy 6...Optimization of friction stir welding parameters for joining aluminum alloy 6...
Optimization of friction stir welding parameters for joining aluminum alloy 6...
 
How to Achieve Better Facade Illumination
How to Achieve Better Facade IlluminationHow to Achieve Better Facade Illumination
How to Achieve Better Facade Illumination
 
Acuerdo pedagogico opcion de grado nivel tecnico creacion de empresa castilla...
Acuerdo pedagogico opcion de grado nivel tecnico creacion de empresa castilla...Acuerdo pedagogico opcion de grado nivel tecnico creacion de empresa castilla...
Acuerdo pedagogico opcion de grado nivel tecnico creacion de empresa castilla...
 
θυμός
θυμός  θυμός
θυμός
 
Valorize o seu Talento
Valorize o seu TalentoValorize o seu Talento
Valorize o seu Talento
 
Experimental Investigation of Wear Properties of Aluminium LM25 Red Mud Metal...
Experimental Investigation of Wear Properties of Aluminium LM25 Red Mud Metal...Experimental Investigation of Wear Properties of Aluminium LM25 Red Mud Metal...
Experimental Investigation of Wear Properties of Aluminium LM25 Red Mud Metal...
 
Descubra Seus Pontos Fortes (por Dario Kosugi)
Descubra Seus Pontos Fortes (por Dario Kosugi)Descubra Seus Pontos Fortes (por Dario Kosugi)
Descubra Seus Pontos Fortes (por Dario Kosugi)
 

Similar to Take A Gulp at Task Automation

Automating WordPress Plugin Development with Gulp
Automating WordPress Plugin Development with GulpAutomating WordPress Plugin Development with Gulp
Automating WordPress Plugin Development with GulpMike Hale
 
Introduction to GulpJs
Introduction to GulpJsIntroduction to GulpJs
Introduction to GulpJsHarish Gadiya
 
Gulp and bower Implementation
Gulp and bower Implementation Gulp and bower Implementation
Gulp and bower Implementation Prashant Shrestha
 
Use groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projectsUse groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projectsFátima Casaú Pérez
 
SpringOne Platform recap 정윤진
SpringOne Platform recap 정윤진SpringOne Platform recap 정윤진
SpringOne Platform recap 정윤진VMware Tanzu Korea
 
Plumbin Pipelines - A Gulp.js workshop
Plumbin Pipelines - A Gulp.js workshopPlumbin Pipelines - A Gulp.js workshop
Plumbin Pipelines - A Gulp.js workshopStefan Baumgartner
 
Workflow automation for Front-end web applications
Workflow automation for Front-end web applicationsWorkflow automation for Front-end web applications
Workflow automation for Front-end web applicationsMayank Patel
 
Introduction to Composer for Drupal
Introduction to Composer for DrupalIntroduction to Composer for Drupal
Introduction to Composer for DrupalLuc Bézier
 
CoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copyCoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copyPatrick Devins
 
Why don't you Groovy?
Why don't you Groovy?Why don't you Groovy?
Why don't you Groovy?Orest Ivasiv
 
Getting started with gulpjs
Getting started with gulpjsGetting started with gulpjs
Getting started with gulpjsunmesh dusane
 
Eclipse Buildship JUG Hamburg
Eclipse Buildship JUG HamburgEclipse Buildship JUG Hamburg
Eclipse Buildship JUG Hamburgsimonscholz
 
Use Ruby to Write (and Test) Your Next Android App
Use Ruby to Write (and Test) Your Next Android AppUse Ruby to Write (and Test) Your Next Android App
Use Ruby to Write (and Test) Your Next Android AppJoel Byler
 
Why and How to integrate Hadoop and NoSQL?
Why and How to integrate Hadoop and NoSQL?Why and How to integrate Hadoop and NoSQL?
Why and How to integrate Hadoop and NoSQL?Tugdual Grall
 
The case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinarThe case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinarbtopro
 
Getting Started With Grunt for WordPress Development
Getting Started With Grunt for WordPress DevelopmentGetting Started With Grunt for WordPress Development
Getting Started With Grunt for WordPress DevelopmentDavid Bisset
 

Similar to Take A Gulp at Task Automation (20)

Automating WordPress Plugin Development with Gulp
Automating WordPress Plugin Development with GulpAutomating WordPress Plugin Development with Gulp
Automating WordPress Plugin Development with Gulp
 
Introduction to GulpJs
Introduction to GulpJsIntroduction to GulpJs
Introduction to GulpJs
 
Gulp and bower Implementation
Gulp and bower Implementation Gulp and bower Implementation
Gulp and bower Implementation
 
Use groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projectsUse groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projects
 
How can your applications benefit from Java 9?
How can your applications benefit from Java 9?How can your applications benefit from Java 9?
How can your applications benefit from Java 9?
 
SpringOne Platform recap 정윤진
SpringOne Platform recap 정윤진SpringOne Platform recap 정윤진
SpringOne Platform recap 정윤진
 
Plumbin Pipelines - A Gulp.js workshop
Plumbin Pipelines - A Gulp.js workshopPlumbin Pipelines - A Gulp.js workshop
Plumbin Pipelines - A Gulp.js workshop
 
Workflow automation for Front-end web applications
Workflow automation for Front-end web applicationsWorkflow automation for Front-end web applications
Workflow automation for Front-end web applications
 
Introduction to Composer for Drupal
Introduction to Composer for DrupalIntroduction to Composer for Drupal
Introduction to Composer for Drupal
 
CoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copyCoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copy
 
Why don't you Groovy?
Why don't you Groovy?Why don't you Groovy?
Why don't you Groovy?
 
Lightweight javaEE with Guice
Lightweight javaEE with GuiceLightweight javaEE with Guice
Lightweight javaEE with Guice
 
OpenCms Days 2014 Keynote - Step up to OpenCms 9.5
OpenCms Days 2014 Keynote - Step up to OpenCms 9.5OpenCms Days 2014 Keynote - Step up to OpenCms 9.5
OpenCms Days 2014 Keynote - Step up to OpenCms 9.5
 
Getting started with gulpjs
Getting started with gulpjsGetting started with gulpjs
Getting started with gulpjs
 
Eclipse Buildship JUG Hamburg
Eclipse Buildship JUG HamburgEclipse Buildship JUG Hamburg
Eclipse Buildship JUG Hamburg
 
Use Ruby to Write (and Test) Your Next Android App
Use Ruby to Write (and Test) Your Next Android AppUse Ruby to Write (and Test) Your Next Android App
Use Ruby to Write (and Test) Your Next Android App
 
Why and How to integrate Hadoop and NoSQL?
Why and How to integrate Hadoop and NoSQL?Why and How to integrate Hadoop and NoSQL?
Why and How to integrate Hadoop and NoSQL?
 
The case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinarThe case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinar
 
Geosense Geoportal
Geosense GeoportalGeosense Geoportal
Geosense Geoportal
 
Getting Started With Grunt for WordPress Development
Getting Started With Grunt for WordPress DevelopmentGetting Started With Grunt for WordPress Development
Getting Started With Grunt for WordPress Development
 

More from Joel Lord

From Ceasar Cipher To Quantum Cryptography
From Ceasar Cipher To Quantum CryptographyFrom Ceasar Cipher To Quantum Cryptography
From Ceasar Cipher To Quantum CryptographyJoel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
Mot de passe oublié? Absolument!
Mot de passe oublié? Absolument!Mot de passe oublié? Absolument!
Mot de passe oublié? Absolument!Joel Lord
 
Asynchronicity: concurrency. A tale of
Asynchronicity: concurrency. A tale ofAsynchronicity: concurrency. A tale of
Asynchronicity: concurrency. A tale ofJoel Lord
 
Learning Machine Learning
Learning Machine LearningLearning Machine Learning
Learning Machine LearningJoel Lord
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Joel Lord
 
WTH is a JWT
WTH is a JWTWTH is a JWT
WTH is a JWTJoel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
WTH is a JWT
WTH is a JWTWTH is a JWT
WTH is a JWTJoel Lord
 
Asynchonicity: concurrency. A tale of
Asynchonicity: concurrency. A tale ofAsynchonicity: concurrency. A tale of
Asynchonicity: concurrency. A tale ofJoel Lord
 
I Don't Care About Security
I Don't Care About Security I Don't Care About Security
I Don't Care About Security Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
Secure your SPA with Auth0
Secure your SPA with Auth0Secure your SPA with Auth0
Secure your SPA with Auth0Joel Lord
 

More from Joel Lord (20)

From Ceasar Cipher To Quantum Cryptography
From Ceasar Cipher To Quantum CryptographyFrom Ceasar Cipher To Quantum Cryptography
From Ceasar Cipher To Quantum Cryptography
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
Mot de passe oublié? Absolument!
Mot de passe oublié? Absolument!Mot de passe oublié? Absolument!
Mot de passe oublié? Absolument!
 
Asynchronicity: concurrency. A tale of
Asynchronicity: concurrency. A tale ofAsynchronicity: concurrency. A tale of
Asynchronicity: concurrency. A tale of
 
Learning Machine Learning
Learning Machine LearningLearning Machine Learning
Learning Machine Learning
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!
 
WTH is a JWT
WTH is a JWTWTH is a JWT
WTH is a JWT
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
WTH is a JWT
WTH is a JWTWTH is a JWT
WTH is a JWT
 
Asynchonicity: concurrency. A tale of
Asynchonicity: concurrency. A tale ofAsynchonicity: concurrency. A tale of
Asynchonicity: concurrency. A tale of
 
I Don't Care About Security
I Don't Care About Security I Don't Care About Security
I Don't Care About Security
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
Secure your SPA with Auth0
Secure your SPA with Auth0Secure your SPA with Auth0
Secure your SPA with Auth0
 

Recently uploaded

ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxNIMMANAGANTI RAMAKRISHNA
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxAndrieCagasanAkio
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxMario
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 

Recently uploaded (11)

ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptx
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptx
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptx
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 

Take A Gulp at Task Automation

  • 1. TAKE A GULP AT TASK AUTOMATION DevTeach Mtl July 2016 Joel Lord - Spiria
  • 3. @joel__lord AGENDA A bit of theory Demo and coding Q&A 7/9/2016 4
  • 4. @joel__lord WHAT IS GULP Gulp is a javascript task runner 7/9/2016 5
  • 5. @joel__lord WHAT IS GULP Gulp is a javascript task runner It helps developers with task repetitive tasks 7/9/2016 6
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 14. @joel__lord ALTERNATIVES TO GULP There are a lot of alternatives out there that you might have heard of 7/9/2016 15
  • 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
  • 16. @joel__lord ALTERNATIVES TO GULP Broccoli JS  Concise code  Built in server  Lacks documentation 7/9/2016 17
  • 17. @joel__lord ALTERNATIVES TO GULP Mimosa JS  CLI tool  Configuration based  Limited set of recipes or plugins  Smaller community 7/9/2016 18
  • 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
  • 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
  • 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
  • 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
  • 23. @joel__lord « MUST HAVE » PLUGINS Uglify Babelify Browserify (this is soooo spring ‘16) Sassify JS Hint (ify?) 7/9/2016 24
  • 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
  • 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
  • 26. @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
  • 27. @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'); });
  • 28. @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
  • 29. @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
  • 30. @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")); });
  • 31. @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
  • 32. @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")); });
  • 33. @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
  • 34. @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
  • 35. @joel__lord USE NPM TO MANAGE DEPENDENCIES Always add a new plugin using 7/9/2016 36 > npm install --save-dev <plugin-name>
  • 36. @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
  • 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"]);
  • 38. @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")); });
  • 39. @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
  • 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")); });
  • 41. @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); });
  • 42. @joel__lord COMPLEXIFYING THIS RECIPE Adding some plugins Let’s look at some real code 7/9/2016 43
  • 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