SlideShare a Scribd company logo

Devenez le plus heureux des Front-end avec Gulp.js

Rémy Savard, profile picture
Rémy Savard

This document discusses using Gulp as a task runner for front-end development. It introduces Gulp and compares it to Grunt, explaining that Gulp uses streaming for faster performance. The document then demonstrates how to set up a basic Gulpfile to compile Sass files to CSS. It covers the main Gulp functions like gulp.task(), gulp.src(), gulp.dest(), and gulp.watch(), and shows how to create dependent tasks. Finally, it recommends some common Gulp plugins for tasks like autoprefixing, uncss, concatenation, minification, and more.

Technology
Related topics:
Front-End
1 of 136
Downloaded 77 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
Gulp Devenez le plus heureux des front-end Rémy Savard Développeur web et formateur/conférencier remysavard.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
GRUNT JavaScript 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
GULP Streaming 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 »
Devenez le plus heureux des Front-end avec Gulp.js
GULP En 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.js packages.json node_modules/ src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.png public/ | index.html | assets/ | | css/ | | | style.css | | | style.min.css | | js/ | | | script.js | | | script.min.js | | img/
gulpfile.js packages.json node_modules/ src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.png public/ | index.html | assets/ | | css/ | | | style.css | | | style.min.css | | js/ | | | script.js | | | script.min.js | | img/
gulpfile.js packages.json node_modules/ src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.png public/ | 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
// Variables var 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
// Variables var 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
Devenez le plus heureux des Front-end avec Gulp.js
- Adam Tomat @adamtoma « Starting the day testing; @BrowserSync making life much easier  »
Devenez le plus heureux des Front-end avec Gulp.js
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 Savard Développeur web et formateur/conférencier remysavard.com | @remysavard | /in/remysavard MERCI « Besoin d’un développeur Web ou d’une formation » remysavard.com
Sources https://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/

More Related Content

PPTX
Introduction to Gulp
apdhtg6
 
PPTX
Grunt - The JavaScript Task Runner
Mohammed Arif
 
PDF
Frontend JS workflow - Gulp 4 and the like
Damien Seguin
 
PPTX
Grunt to automate JS build
Tejaswita Takawale
 
PPTX
JavaScript code academy - introduction
Jaroslav Kubíček
 
ODP
GulpJs - An Introduction
Knoldus Inc.
 
PDF
GDG Kraków - Intro to front-end automation using bower.js & grunt.js
Dominik Prokop
 
PDF
The Secrets of The FullStack Ninja - Part A - Session I
Oded Sagir
 
Introduction to Gulp
apdhtg6
 
Grunt - The JavaScript Task Runner
Mohammed Arif
 
Frontend JS workflow - Gulp 4 and the like
Damien Seguin
 
Grunt to automate JS build
Tejaswita Takawale
 
JavaScript code academy - introduction
Jaroslav Kubíček
 
GulpJs - An Introduction
Knoldus Inc.
 
GDG Kraków - Intro to front-end automation using bower.js & grunt.js
Dominik Prokop
 
The Secrets of The FullStack Ninja - Part A - Session I
Oded Sagir
 

What's hot (19)

PDF
Introduction to Express and Grunt
Peter deHaan
 
PDF
Production Ready Javascript With Grunt
XB Software, Ltd.
 
PDF
Getting started with gulpjs
unmesh dusane
 
PPTX
Introduction to using Grunt & Bower with WordPress theme development
James Bundey
 
PDF
Grunt & Front-end Workflow
Pagepro
 
PDF
Modernizing Your WordPress Workflow with Grunt & Bower
Alan Crissey
 
PDF
Grunt All Day
douglasknudsen
 
PDF
60分鐘完送百萬edm，背後雲端ci/cd實戰大公開
KAI CHU CHUNG
 
PPTX
Gulp and bower Implementation
Prashant Shrestha
 
PPTX
Go to gRPC
Naren Arya
 
PPTX
Plone deployment made easy
Kim Chee Leong
 
PDF
Bower & Grunt - A practical workflow
Riccardo Coppola
 
PDF
Npm scripts
정윤 김
 
PDF
TDC2016SP - Esqueça Grunt ou Gulp. Webpack and NPM rule them all!
tdc-globalcode
 
PDF
Google App Engine: Basic
KAI CHU CHUNG
 
PDF
Screenshot as a service
KAI CHU CHUNG
 
PPTX
Grunt and Bower
George Estebe
 
PDF
JLPDevs - Optimization Tooling for Modern Web App Development
JLP Community
 
PDF
Web development tools { starter pack }
François Michaudon
 
Introduction to Express and Grunt
Peter deHaan
 
Production Ready Javascript With Grunt
XB Software, Ltd.
 
Getting started with gulpjs
unmesh dusane
 
Introduction to using Grunt & Bower with WordPress theme development
James Bundey
 
Grunt & Front-end Workflow
Pagepro
 
Modernizing Your WordPress Workflow with Grunt & Bower
Alan Crissey
 
Grunt All Day
douglasknudsen
 
60分鐘完送百萬edm，背後雲端ci/cd實戰大公開
KAI CHU CHUNG
 
Gulp and bower Implementation
Prashant Shrestha
 
Go to gRPC
Naren Arya
 
Plone deployment made easy
Kim Chee Leong
 
Bower & Grunt - A practical workflow
Riccardo Coppola
 
Npm scripts
정윤 김
 
TDC2016SP - Esqueça Grunt ou Gulp. Webpack and NPM rule them all!
tdc-globalcode
 
Google App Engine: Basic
KAI CHU CHUNG
 
Screenshot as a service
KAI CHU CHUNG
 
Grunt and Bower
George Estebe
 
JLPDevs - Optimization Tooling for Modern Web App Development
JLP Community
 
Web development tools { starter pack }
François Michaudon
 
Ad

Viewers also liked (20)

PDF
Intro to Gulp
Matt Brunt
 
PDF
Résultats de recherche améliorés avec les microdonnées HTML5
Rémy Savard
 
KEY
HTML5 - Sémantique, structure et nouveaux éléments
Rémy Savard
 
KEY
CSS3 - nouveautes
Rémy Savard
 
PPTX
Gulp: Task Runner
Christopher Bautista
 
PPTX
Bower introduction
Oleksii Prohonnyi
 
PDF
Automating your workflow with Gulp.js
Bo-Yi Wu
 
PPTX
40+ tips to use Postman more efficiently
postmanclient
 
PPSX
Páginas+w..
guest2479f2
 
DOC
C:\Fakepath\CóDigo De éTica Ese Hfv
E.S.E. Hospital Francisco Valderrama
 
PPTX
Fatla
ESPOCH
 
PPTX
Creando un blog
pedroxido
 
PPT
Tarjeta Madre
lasdemo
 
PPT
Presentación memoria
memoriamemory
 
PDF
Festival de cinéma de douarnenez
cain33
 
PDF
Ne Ratez pas le Mariage du (21ème) siècle
Laurent Sarrazin
 
PDF
JABES 2015 LEGANTo, une solution pour la gestion de listes de lecture / Maud ...
ABES
 
PPT
Web 2.0 para bibliotecas
Embajada de EE.UU. en el Perú
 
PDF
Documentation Technique : CanSat Eole
CLES-FACIL
 
PDF
Futurapolis 2013, le programme
Le Point
 
Intro to Gulp
Matt Brunt
 
Résultats de recherche améliorés avec les microdonnées HTML5
Rémy Savard
 
HTML5 - Sémantique, structure et nouveaux éléments
Rémy Savard
 
CSS3 - nouveautes
Rémy Savard
 
Gulp: Task Runner
Christopher Bautista
 
Bower introduction
Oleksii Prohonnyi
 
Automating your workflow with Gulp.js
Bo-Yi Wu
 
40+ tips to use Postman more efficiently
postmanclient
 
Páginas+w..
guest2479f2
 
C:\Fakepath\CóDigo De éTica Ese Hfv
E.S.E. Hospital Francisco Valderrama
 
Fatla
ESPOCH
 
Creando un blog
pedroxido
 
Tarjeta Madre
lasdemo
 
Presentación memoria
memoriamemory
 
Festival de cinéma de douarnenez
cain33
 
Ne Ratez pas le Mariage du (21ème) siècle
Laurent Sarrazin
 
JABES 2015 LEGANTo, une solution pour la gestion de listes de lecture / Maud ...
ABES
 
Web 2.0 para bibliotecas
Embajada de EE.UU. en el Perú
 
Documentation Technique : CanSat Eole
CLES-FACIL
 
Futurapolis 2013, le programme
Le Point
 
Ad

Similar to Devenez le plus heureux des Front-end avec Gulp.js (20)

PDF
Quest for the Perfect Workflow for McrFRED
Andi Smith
 
PDF
Modern Web Application Development Workflow - EclipseCon France 2014
Stéphane Bégaudeau
 
PDF
Modern Web Application Development Workflow - EclipseCon Europe 2014
Stéphane Bégaudeau
 
PDF
Get Grulping with JavaScript Task Runners (Matt Gifford)
Future Insights
 
PDF
Deploying Symfony | symfony.cat
Pablo Godel
 
PDF
May The Nodejs Be With You
Dalibor Gogic
 
PPTX
2015 - Basta! 2015, DE: JavaScript und build
Daniel Fisher
 
PDF
DevOps For Small Teams
Joe Ferguson
 
PPTX
Automated Development Workflow with Gulp
plewicki
 
PDF
Forget Grunt and Gulp! Webpack and NPM rule them all!
Derek Willian Stavis
 
KEY
Cooking with Chef
Ken Robertson
 
PDF
Hitchhiker's guide to the front end development
정윤 김
 
PDF
Gulp: Your Build Process Will Thank You
RadWorks
 
ODP
Capifony. Minsk PHP MeetUp #11
Yury Pliashkou
 
PDF
Madison PHP 2015 - DevOps For Small Teams
Joe Ferguson
 
PDF
Workflow automation for Front-end web applications
Mayank Patel
 
PDF
Modern Web Application Development Workflow - web2day 2014
Stéphane Bégaudeau
 
PDF
ZendCon 2015 - DevOps for Small Teams
Joe Ferguson
 
PDF
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
Evan Mullins
 
PPT
CoffeeScript: A beginner's presentation for beginners copy
Patrick Devins
 
Quest for the Perfect Workflow for McrFRED
Andi Smith
 
Modern Web Application Development Workflow - EclipseCon France 2014
Stéphane Bégaudeau
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Stéphane Bégaudeau
 
Get Grulping with JavaScript Task Runners (Matt Gifford)
Future Insights
 
Deploying Symfony | symfony.cat
Pablo Godel
 
May The Nodejs Be With You
Dalibor Gogic
 
2015 - Basta! 2015, DE: JavaScript und build
Daniel Fisher
 
DevOps For Small Teams
Joe Ferguson
 
Automated Development Workflow with Gulp
plewicki
 
Forget Grunt and Gulp! Webpack and NPM rule them all!
Derek Willian Stavis
 
Cooking with Chef
Ken Robertson
 
Hitchhiker's guide to the front end development
정윤 김
 
Gulp: Your Build Process Will Thank You
RadWorks
 
Capifony. Minsk PHP MeetUp #11
Yury Pliashkou
 
Madison PHP 2015 - DevOps For Small Teams
Joe Ferguson
 
Workflow automation for Front-end web applications
Mayank Patel
 
Modern Web Application Development Workflow - web2day 2014
Stéphane Bégaudeau
 
ZendCon 2015 - DevOps for Small Teams
Joe Ferguson
 
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
Evan Mullins
 
CoffeeScript: A beginner's presentation for beginners copy
Patrick Devins
 

Recently uploaded (20)

PPTX
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
SilvioHayashi
 
PPTX
Chapter 5: Probability Theory and Statistics
RandyFin
 
PDF
DASA ADMISSION 2024_FirstRound_FirstRank_LastRank.pdf
rameswartudu05
 
PDF
Getting Started with Data Integration: FME Form 101
Safe Software
 
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Chinchu40
 
PDF
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
PPTX
Modernising the Digital Integration Hub
Daniel Toomey
 
PDF
August Patch Tuesday
Ivanti
 
PPTX
1. Introduction to Computer Programming.pptx
bonakiduza1024
 
PDF
WOOl fibre morphology and structure.pdf for textiles
Rajendrakumar868651
 
PDF
project resource management chapter-09.pdf
ssuser00e6e21
 
PDF
Architecture types and enterprise applications.pdf
ChristopherTHyatt
 
PPTX
Final SEM Unit 1 for mit wpu at pune .pptx
anishtilekar08
 
PDF
Assigned Numbers - 2025 - Bluetooth® Document
Bloombase
 
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
MatthewLewis227954
 
PDF
Zenith AI: Advanced Artificial Intelligence
Biz Preneurs
 
PDF
DP Operators-handbook-extract for the Mautical Institute
LeonelMejiaLarios
 
PDF
NewMind AI Weekly Chronicles - August'25-Week II
NewMind AI
 
PPTX
cloud_computing_Infrastucture_as_cloud_p
mainakbhattacharya20
 
PPTX
The various Industrial Revolutions .pptx
bandileshozi3
 
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
SilvioHayashi
 
Chapter 5: Probability Theory and Statistics
RandyFin
 
DASA ADMISSION 2024_FirstRound_FirstRank_LastRank.pdf
rameswartudu05
 
Getting Started with Data Integration: FME Form 101
Safe Software
 
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Chinchu40
 
A comparative study of natural language inference in Swahili using monolingua...
IAESIJAI
 
Modernising the Digital Integration Hub
Daniel Toomey
 
August Patch Tuesday
Ivanti
 
1. Introduction to Computer Programming.pptx
bonakiduza1024
 
WOOl fibre morphology and structure.pdf for textiles
Rajendrakumar868651
 
project resource management chapter-09.pdf
ssuser00e6e21
 
Architecture types and enterprise applications.pdf
ChristopherTHyatt
 
Final SEM Unit 1 for mit wpu at pune .pptx
anishtilekar08
 
Assigned Numbers - 2025 - Bluetooth® Document
Bloombase
 
Group 1 Presentation -Planning and Decision Making .pptx
MatthewLewis227954
 
Zenith AI: Advanced Artificial Intelligence
Biz Preneurs
 
DP Operators-handbook-extract for the Mautical Institute
LeonelMejiaLarios
 
NewMind AI Weekly Chronicles - August'25-Week II
NewMind AI
 
cloud_computing_Infrastucture_as_cloud_p
mainakbhattacharya20
 
The various Industrial Revolutions .pptx
bandileshozi3
 

Devenez le plus heureux des Front-end avec Gulp.js

  • 1. Gulp Devenez le plus heureux des front-end Rémy Savard Développeur web et formateur/conférencier remysavard.com | @remysavard | /in/remysavard
  • 2. Pourquoi automatiser Gulp et Grunt Gulp - Installation et Code Gulp - Extensions
  • 5. 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) …
  • 6. Photo: © « L’écosystème des outils devient de plus en plus complexe, mais vous devez les connaître, les utiliser et les aimer »
  • 7. Photo: © « Soyez productifs et efficaces - Automatisez »
  • 8. Exécutez du JS sur le serveur Exécutez du JS en ligne de commande
  • 9. GRUNT JavaScript 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
  • 10. GULP Streaming 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
  • 11. Photo: © « Peu importe lequel vous choisissez, Aimez-le et utilisez-le »
  • 12. - Ashley Nolan @AshNolan_ « I asked 2028 front-end developers: 
 What task runner do you prefer using … »
  • 13. Gulp: 44% Grunt: 28% - Ashley Nolan @AshNolan_
  • 14. - Nick DeNardis @nickdenardis « After @gruntjs revolutionized my webdev workflow… »
  • 15. - Nick DeNardis @nickdenardis « …@gulpjs comes along and optimizes the shit out of it. #iaminlove »
  • 16. - Sindre Sorhus Yeoman team, NPM contributor - @sindresorhus « Getting started with @gulpjs […] Think @gruntjs, but faster and less config »
  • 17. - Wes Cruver @WesCruver « Woah, my @gruntjs watch task went from over 2s to 21ms after switching to @gulpjs […] »
  • 18. - MichaelSharer Developer for @NHL - @MichaelSharer « We at the @NHL use @gulpjs »
  • 20. GULP En quelques mots Extraction des fichiers du disque dur Transformations dans la mémoire Réécriture des fichiers sur le disque dur
  • 22. Installez Node - https://nodejs.org/
  • 23. GAME CHANGER OF THE YEAR | Nomination
  • 24. npm install --global gulp npm install --save-dev gulp Créez le fichier gulpfile.js npm init Ligne de commande
  • 25. npm install --global gulp npm install --save-dev gulp Créez le fichier gulpfile.js npm init Ligne de commande
  • 26. { "name": "gulp-confoo-2016", "description": "Gulp pour confoo 2016", "version": "1.0.0", "author": "remysavard.com", "copyright": "2016", "devDependencies": {}, "dependencies": {} } package.json
  • 27. npm install --global gulp npm install --save-dev gulp Créez le fichier gulpfile.js npm init Ligne de commande
  • 28. { "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
  • 29. npm install --global gulp npm install --save-dev gulp Créez le fichier gulpfile.js npm init Ligne de commande
  • 30. gulpfile.js packages.json node_modules/ src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.png public/ | index.html | assets/ | | css/ | | | style.css | | | style.min.css | | js/ | | | script.js | | | script.min.js | | img/
  • 31. gulpfile.js packages.json node_modules/ src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.png public/ | index.html | assets/ | | css/ | | | style.css | | | style.min.css | | js/ | | | script.js | | | script.min.js | | img/
  • 32. gulpfile.js packages.json node_modules/ src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.png public/ | index.html | assets/ | | css/ | | | style.css | | | style.min.css | | js/ | | | script.js | | | script.min.js | | img/
  • 33. Photo: © « 4 fonctions à retenir »
  • 35. var gulp = require('gulp'); gulp.task('default', function() { console.log('Bonjour confoo 2016'); }); gulpfile.js
  • 36. var gulp = require('gulp'); gulp.task('default', function() { console.log('Bonjour confoo 2016'); }); gulpfile.js
  • 37. var gulp = require('gulp'); gulp.task('default', function() { console.log('Bonjour confoo 2016'); }); gulpfile.js
  • 38. var gulp = require('gulp'); gulp.task('default', function() { console.log('Bonjour confoo 2016'); }); gulpfile.js
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. var gulp = require('gulp'); gulp.task('confoo', function() { console.log('Bonjour confoo 2016'); }); gulpfile.js
  • 43. 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
  • 44. 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
  • 46. Compilation de fichiers .scss en .css SASS
  • 47. npm install --save-dev gulp-sass Ligne de commande
  • 48. 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
  • 49. 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
  • 50. 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
  • 56. // Variables var 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
  • 57. // Variables var 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
  • 58. 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
  • 59. 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
  • 61. 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
  • 62. 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
  • 64. 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
  • 65. 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
  • 66. 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
  • 67. 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
  • 69. Compilation de fichiers .scss en .css Minification des fichiers CSS Renommer les fichiers avec l’extension .min.css CSS
  • 70. npm install --save-dev gulp-csso npm install --save-dev gulp-rename Ligne de commande
  • 71. npm install --save-dev gulp-csso npm install --save-dev gulp-rename Ligne de commande
  • 72. 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
  • 73. 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
  • 74. 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
  • 75. 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
  • 76. 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
  • 77. 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
  • 78. 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
  • 80. Photo: © « Extensions - Point de départ »
  • 81. Réduire la quantité de Requêtes HTTP Réduire le poids des fichiers Performances Web
  • 82. 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
  • 83. npm install --save-dev gulp-autoprefixer npm install --save-dev gulp-uncss npm install --save-dev gulp-concat Ligne de commande
  • 84. npm install --save-dev gulp-autoprefixer npm install --save-dev gulp-uncss npm install --save-dev gulp-concat Ligne de commande
  • 85. npm install --save-dev gulp-autoprefixer npm install --save-dev gulp-uncss npm install --save-dev gulp-concat Ligne de commande
  • 86. 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
  • 87. 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
  • 88. 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
  • 89. 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
  • 90. 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
  • 91. 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
  • 92. 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
  • 93. Rapports d’erreurs avec JSHint Concaténation de fichiers JS Minification Uglify de fichiers JS JavaScript
  • 94. npm install --save-dev gulp-jshint npm install --save-dev gulp-uglify Ligne de commande
  • 95. npm install --save-dev gulp-jshint npm install --save-dev gulp-uglify Ligne de commande
  • 96. 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
  • 97. 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
  • 98. 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
  • 99. 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
  • 100. 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
  • 101. 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
  • 102. Optimisation d’images (PNG, JPEG, GIF, SVG) Génération de sprites Images
  • 103. npm install --save-dev gulp-imagemin npm install --save-dev gulp-spritesmith Ligne de commande
  • 104. npm install --save-dev gulp-imagemin npm install --save-dev gulp.spritesmith Ligne de commande
  • 105. 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')); });
  • 106. 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')); });
  • 107. 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')); });
  • 108. 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')); });
  • 109. 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')); });
  • 110. 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')); });
  • 111. 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')); });
  • 112. 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')); });
  • 113. 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')); });
  • 114. 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')); });
  • 115. Synchronisation d’appareils + Live Reload Cmd+S, Cmd+Tab, Cmd+R
  • 116. npm install --save-dev browser-sync Ligne de commande OPEN SOURCE PROJECT OF THE YEAR | Nomination
  • 117. gulpfile.js var gulp = require('gulp'), … gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(gulp.dest('public/assets/css')) });
  • 118. 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()); });
  • 119. gulpfile.js gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']); });
  • 120. gulpfile.js gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']); });
  • 121. gulpfile.js gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']); });
  • 122. gulpfile.js gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']); });
  • 123. 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
  • 124. 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
  • 125. 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
  • 126. 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
  • 128. - Adam Tomat @adamtoma « Starting the day testing; @BrowserSync making life much easier  »
  • 130. Photo: © « Extensions - C’est tout? »
  • 132. Photo: © « Soyez productifs et efficaces - Automatisez »
  • 133. 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
  • 135. Rémy Savard Développeur web et formateur/conférencier remysavard.com | @remysavard | /in/remysavard MERCI « Besoin d’un développeur Web ou d’une formation » remysavard.com