Devenez le plus heureux des front-end avec Gulp et Grunt

GulpDevenez le plus heureux des front-end

Rémy SavardDéveloppeur web et formateur/conférencierremysavard.com | @remysavard | /in/remysavard

Pourquoi automatiser

Gulp et Grunt

Gulp - Installation et Code

Gulp - Extensions

@remysavard

HTML

CSS

JS

Photo: ©

« Beaucoup d’outils! »

Photo: ©

Syntaxe et balisage (Haml, Markdown)

Templates (Underscore, Handlebars, Jade)

Tests et erreurs (W3C, JSHint, Mocha, Karma)

Préprocesseur CSS (Sass, Less, Stylus, Compass)

Préprocesseur JavaScript (CoffeeScript, TypeScript)

Minification de fichiers CSS et JS (Uglify, CodeKit)

Concaténation de fichiers CSS et JS (CodeKit)

Optimisation d’image (TinyPNG, CodeKit)

Génération de sprites (SpriteCow)

…

Photo: ©

« L’écosystème des outils devient de plus en plus complexe, mais vous devez

les connaître, les utiliser et les aimer »

Photo: ©

« Soyez productifs et efficaces - Automatisez »

Exécutez du JS sur le serveur

Exécutez du JS en ligne de commande

GRUNTJavaScript Task Runner

5 500+ extensions

Passez du temps à configurer vos extensions

Utilise des fichiers et répertoires temporaires

Exécute l'une après l'autre les tâches

OPEN SOURCE PROJECT OF THE YEAR | Winner

GULPStreaming Build System

2 200+ extensions

Passez du temps à coder au lieu de configurer

Mise en mémoire des fichiers grâce aux Streams

Exécute les tâches en concurrence maximum

OPEN SOURCE PROJECT OF THE YEAR | Nomination

Photo: ©

« Peu importe lequel vous choisissez, Aimez-le et utilisez-le »

- Ashley Nolan @AshNolan_

« I asked 2028 front-end developers: What task runner do you prefer using … »

Gulp: 44%

Grunt: 28%

- Ashley Nolan @AshNolan_

- Nick DeNardis @nickdenardis

« After @gruntjs revolutionized my webdev workflow… »

- Nick DeNardis @nickdenardis

« …@gulpjs comes along and optimizes the shit out of it. #iaminlove »

- Sindre Sorhus Yeoman team, NPM contributor - @sindresorhus

« Getting started with @gulpjs […] Think @gruntjs, but faster and less config »

- Wes Cruver @WesCruver

« Woah, my @gruntjs watch task went from over 2s to 21ms after switching to @gulpjs […] »

- MichaelSharer Developer for @NHL - @MichaelSharer

« We at the @NHL use @gulpjs »

GULPEn quelques mots

Extraction des fichiers du disque dur

Transformations dans la mémoire

Réécriture des fichiers sur le disque dur

gulp });

gulp });

« CODE »

Installez Node - https://nodejs.org/

GAME CHANGER OF THE YEAR | Nomination

npm install --global gulp

npm install --save-dev gulp

Créez le fichier gulpfile.js

npm init

Ligne de commande

npm install --global gulp

npm install --save-dev gulp

Créez le fichier gulpfile.js

npm init

Ligne de commande

{ "name": "gulp-confoo-2016", "description": "Gulp pour confoo 2016", "version": "1.0.0", "author": "remysavard.com", "copyright": "2016", "devDependencies": {}, "dependencies": {}}

package.json

npm install --global gulp

npm install --save-dev gulp

Créez le fichier gulpfile.js

npm init

Ligne de commande

{ "name": "gulp-confoo-2016", "description": "Gulp pour confoo 2016", "version": "1.0.0", "author": "remysavard.com", "copyright": "2016", "devDependencies": { "gulp": "^3.9.1" }, "dependencies": {}}

package.json

npm install --global gulp

npm install --save-dev gulp

Créez le fichier gulpfile.js

npm init

Ligne de commande

gulpfile.jspackages.jsonnode_modules/src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.pngpublic/ | index.html | assets/ | | css/ | | | style.css | | | style.min.css | | js/ | | | script.js | | | script.min.js | | img/

gulpfile.jspackages.jsonnode_modules/src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.pngpublic/ | index.html | assets/ | | css/ | | | style.css | | | style.min.css | | js/ | | | script.js | | | script.min.js | | img/

gulpfile.jspackages.jsonnode_modules/src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.pngpublic/ | index.html | assets/ | | css/ | | | style.css | | | style.min.css | | js/ | | | script.js | | | script.min.js | | img/

Photo: ©

« 4 fonctions à retenir »

gulp.task()

var gulp = require('gulp');

gulp.task('default', function() {console.log('Bonjour confoo 2016');

});

gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {console.log('Bonjour confoo 2016');

});

gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {console.log('Bonjour confoo 2016');

});

gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {console.log('Bonjour confoo 2016');

});

gulpfile.js

Ligne de commande

> gulp[14:40:44] Using gulpfile ~/…/gulpfile.js[14:40:44] Starting 'default'...Bonjour confoo 2016[14:40:44] Finished 'default' after 75 μs

Ligne de commande

> gulp[14:40:44] Using gulpfile ~/…/gulpfile.js[14:40:44] Starting 'default'...Bonjour confoo 2016[14:40:44] Finished 'default' after 75 μs

Ligne de commande

> gulp[14:40:44] Using gulpfile ~/…/gulpfile.js[14:40:44] Starting 'default'...Bonjour confoo 2016[14:40:44] Finished 'default' after 75 μs

var gulp = require('gulp');

gulp.task('confoo', function() {console.log('Bonjour confoo 2016');

});

gulpfile.js

Ligne de commande

> gulp confoo[14:40:44] Using gulpfile ~/…/gulpfile.js[14:40:44] Starting 'confoo'...Bonjour confoo 2016[14:40:44] Finished 'confoo' after 75 μs

Ligne de commande

> gulp confoo[14:40:44] Using gulpfile ~/…/gulpfile.js[14:40:44] Starting 'confoo'...Bonjour confoo 2016[14:40:44] Finished 'confoo' after 75 μs

gulp.src()

Compilation de fichiers .scss en .css

SASS

npm install --save-dev gulp-sass

Ligne de commande

var gulp = require('gulp'),sass = require('gulp-sass');

gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'));});

gulpfile.js

var gulp = require('gulp'),sass = require('gulp-sass');

gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'));});

gulpfile.js

var gulp = require('gulp'),sass = require('gulp-sass');

gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'));});

gulpfile.js

gulp.src('src/scss/style.scss')

gulp.src('src/scss/*.scss')

gulp.src('src/scss/**/*.scss')

gulp.src('!src/scss/style.not.scss')

gulp.src('*.+(js|css)')

gulpfile.js

gulp.src('src/scss/style.scss')

gulp.src('src/scss/*.scss')

gulp.src('src/scss/**/*.scss')

gulp.src('!src/scss/style.not.scss')

gulp.src('*.+(js|css)')

gulpfile.js

gulp.src('src/scss/style.scss')

gulp.src('src/scss/*.scss')

gulp.src('src/scss/**/*.scss')

gulp.src('!src/scss/style.not.scss')

gulp.src('*.+(js|css)')

gulpfile.js

gulp.src('src/scss/style.scss')

gulp.src('src/scss/*.scss')

gulp.src('src/scss/**/*.scss')

gulp.src('!src/scss/style.not.scss')

gulp.src('*.+(js|css)')

gulpfile.js

gulp.src('src/scss/style.scss')

gulp.src('src/scss/*.scss')

gulp.src('src/scss/**/*.scss')

gulp.src('!src/scss/style.not.scss')

gulp.src('*.+(js|css)')

gulpfile.js

// Variablesvar paths = { src: 'src/', scss: 'src/scss/**/*.scss', html: 'src/*.html', assets: 'assets/', images: 'assets/img/**/*', css: 'assets/css/**/*.css', scripts: 'assets/js/**/*.js'};

gulp.src(paths.scss)

gulpfile.js

// Variablesvar paths = { src: 'src/', scss: 'src/scss/**/*.scss', html: 'src/*.html', assets: 'assets/', images: 'assets/img/**/*', css: 'assets/css/**/*.css', scripts: 'assets/js/**/*.js'};

gulp.src(paths.scss)

gulpfile.js

var gulp = require('gulp'),sass = require('gulp-sass');

gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'));});

gulpfile.js

var gulp = require('gulp'),sass = require('gulp-sass');

gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'));});

gulpfile.js

gulp.dest()

var gulp = require('gulp'),sass = require('gulp-sass');

gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'));});

gulpfile.js

var gulp = require('gulp'),sass = require('gulp-sass');

gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'));});

gulpfile.js

gulp.watch()

var gulp = require('gulp'),sass = require('gulp-sass');

gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'));});

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

gulpfile.js

var gulp = require('gulp'),sass = require('gulp-sass');

gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'));});

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

gulpfile.js

var gulp = require('gulp'),sass = require('gulp-sass');

gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'));});

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

gulpfile.js

var gulp = require('gulp'),sass = require('gulp-sass');

gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'));});

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

gulpfile.js

Dépendance des tâches

Compilation de fichiers .scss en .css

Minification des fichiers CSS

Renommer les fichiers avec l’extension .min.css

CSS

npm install --save-dev gulp-csso

npm install --save-dev gulp-rename

Ligne de commande

npm install --save-dev gulp-csso

npm install --save-dev gulp-rename

Ligne de commande

var gulp = require('gulp'), …

gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

« Vous êtes prêt !!! »

Photo: ©

« Extensions - Point de départ »

Réduire la quantité de Requêtes HTTP

Réduire le poids des fichiers

Performances Web

Compilation de fichiers .scss en .css

Ajout automatique de préfixes avec Can I Use

Concaténation de fichiers CSS

Suppression des CSS inutilisés

Minification des fichiers CSS

Renommer les fichiers avec l’extension .min.css

CSS

npm install --save-dev gulp-autoprefixer

npm install --save-dev gulp-uncss

npm install --save-dev gulp-concat

Ligne de commande

npm install --save-dev gulp-autoprefixer

npm install --save-dev gulp-uncss

npm install --save-dev gulp-concat

Ligne de commande

npm install --save-dev gulp-autoprefixer

npm install --save-dev gulp-uncss

npm install --save-dev gulp-concat

Ligne de commande

var gulp = require('gulp'), …

gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))

.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))

.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))

.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))

.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))

.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))

.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))

.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});

gulpfile.js

Rapports d’erreurs avec JSHint

Concaténation de fichiers JS

Minification Uglify de fichiers JS

JavaScript

npm install --save-dev gulp-jshint

npm install --save-dev gulp-uglify

Ligne de commande

npm install --save-dev gulp-jshint

npm install --save-dev gulp-uglify

Ligne de commande

var gulp = require('gulp'), …

gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))

.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))

.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))

.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))

.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))

.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))

.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});

gulpfile.js

Optimisation d’images (PNG, JPEG, GIF, SVG)

Génération de sprites

Images

npm install --save-dev gulp-imagemin

npm install --save-dev gulp-spritesmith

Ligne de commande

npm install --save-dev gulp-imagemin

npm install --save-dev gulp.spritesmith

Ligne de commande

gulpfile.js

var gulp = require('gulp'), …

gulp.task('images', function() { gulp.src('src/img/**/*') .pipe(imagemin({

optimizationLevel: 3, progressive: true,

interlaced: true}))

.pipe(gulp.dest('public/assets/img'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('images', function() { gulp.src('src/img/**/*') .pipe(imagemin({

optimizationLevel: 3, progressive: true,

interlaced: true}))

.pipe(gulp.dest('public/assets/img'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('images', function() { gulp.src('src/img/**/*') .pipe(imagemin({

optimizationLevel: 3, progressive: true,

interlaced: true}))

.pipe(gulp.dest('public/assets/img'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('images', function() { gulp.src('src/img/**/*') .pipe(imagemin({

optimizationLevel: 3, progressive: true,

interlaced: true}))

.pipe(gulp.dest('public/assets/img'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('images', function() { gulp.src('src/img/**/*') .pipe(imagemin({

optimizationLevel: 3, progressive: true,

interlaced: true}))

.pipe(gulp.dest('public/assets/img'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('sprite', function () { gulp.src('src/img/sprites/*.png') .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })) .pipe(gulp.dest('public/assets/img/sprites'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('sprite', function () { gulp.src('src/img/sprites/*.png') .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })) .pipe(gulp.dest('public/assets/img/sprites'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('sprite', function () { gulp.src('src/img/sprites/*.png') .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })) .pipe(gulp.dest('public/assets/img/sprites'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('sprite', function () { gulp.src('src/img/sprites/*.png') .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })) .pipe(gulp.dest('public/assets/img/sprites'));});

gulpfile.js

var gulp = require('gulp'), …

gulp.task('sprite', function () { gulp.src('src/img/sprites/*.png') .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })) .pipe(gulp.dest('public/assets/img/sprites'));});

Synchronisation d’appareils + Live Reload

Cmd+S, Cmd+Tab, Cmd+R

npm install --save-dev browser-sync

Ligne de commande

OPEN SOURCE PROJECT OF THE YEAR | Nomination

gulpfile.js

var gulp = require('gulp'), … gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'))});

gulpfile.js

var gulp = require('gulp'), … gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())

.pipe(gulp.dest('public/assets/css'))

.pipe(browserSync.stream());});

gulpfile.js

gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']);});

gulpfile.js

gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']);});

gulpfile.js

gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']);});

gulpfile.js

gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']);});

Ligne de commande

> gulp sync[08:02:01] Using gulpfile ~/…/gulpfile.js[08:02:01] Starting 'sass'...[08:02:01] Finished 'sass' after 5.51 ms[08:02:01] Starting 'sync'...[08:02:02] Finished 'sync' after 21 ms[BS] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://10.0.1.8:3000 ---------------------------------- UI: http://localhost:3001 UI External: http://10.0.1.8:3001 ----------------------------------[BS] Serving files from: public

Ligne de commande

> gulp sync[08:02:01] Using gulpfile ~/…/gulpfile.js[08:02:01] Starting 'sass'...[08:02:01] Finished 'sass' after 5.51 ms[08:02:01] Starting 'sync'...[08:02:02] Finished 'sync' after 21 ms[BS] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://10.0.1.8:3000 ---------------------------------- UI: http://localhost:3001 UI External: http://10.0.1.8:3001 ----------------------------------[BS] Serving files from: public

Ligne de commande

> gulp sync[08:02:01] Using gulpfile ~/…/gulpfile.js[08:02:01] Starting 'sass'...[08:02:01] Finished 'sass' after 5.51 ms[08:02:01] Starting 'sync'...[08:02:02] Finished 'sync' after 21 ms[BS] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://10.0.1.8:3000 ---------------------------------- UI: http://localhost:3001 UI External: http://10.0.1.8:3001 ----------------------------------[BS] Serving files from: public

Ligne de commande

> gulp sync[08:02:01] Using gulpfile ~/…/gulpfile.js[08:02:01] Starting 'sass'...[08:02:01] Finished 'sass' after 5.51 ms[08:02:01] Starting 'sync'...[08:02:02] Finished 'sync' after 21 ms[BS] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://10.0.1.8:3000 ---------------------------------- UI: http://localhost:3001 UI External: http://10.0.1.8:3001 ----------------------------------[BS] Serving files from: public

- Adam Tomat @adamtoma

« Starting the day testing; @BrowserSync making life much easier  »

Photo: ©

« Extensions - C’est tout? »

Photo: ©

Extensions intéressantes

gulp-util

gulp-clean

gulp-cached

gulp-changed

gulp-remember

gulp-bower

gulp-notify

gulp-compass

gulp-inject

gulp-react

gulp-load-plugins

gulp-mocha

gulp-jasmine

gulp-template

Photo: ©

« Soyez productifs et efficaces - Automatisez »

Configurez-le à votre goût

Réutilisez vos recettes

Itérez et améliorez votre gabarit

Souriez et soyez heureux

Débutez avec un gabarit

Photo: ©

« Êtes-vous plus heureux ? »

Rémy SavardDéveloppeur web et formateur/conférencierremysavard.com | @remysavard | /in/remysavard

MERCI

« Besoin d’un développeur Webou d’une formation »

remysavard.com

Sourceshttps://speakerdeck.com/jackfranklin/fowa-development-with-gulpjs

https://speakerdeck.com/addyosmani/automating-front-end-workflow

https://medium.com/@contrahacks/gulp-3828e8126466

http://www.smashingmagazine.com/2014/06/11/building-with-gulp/

http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt/

http://markgoodyear.com/2014/01/getting-started-with-gulp/

http://www.smashingmagazine.com/2014/06/11/building-with-gulp/

https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

https://github.com/substack/stream-handbook

https://github.com/gulpjs/