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.

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

3. @remysavard
HTML
CSS
JS

4. Photo: ©
« Beaucoup d’outils! »

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

21. gulp
});
gulp
});
« CODE »

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 »

34. gulp.task()

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

45. gulp.src()

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

51. 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

52. 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

53. 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

54. 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

55. 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

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

60. gulp.dest()

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

63. gulp.watch()

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

68. Dépendance des
tâches

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

79. « Vous êtes prêt !!! »

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? »

131. 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

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

134. Photo: ©
« Êtes-vous plus heureux ? »

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

136. 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/