Gulp
Devenez le plus heureux des front-end
Rémy Savard
Développeur web et formateur/conférencier
remysavard.com | @remysav...
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, Moch...
Photo: ©
« L’écosystème des outils devient de plus en
plus complexe, mais vous devez
les connaître, les utiliser et les ai...
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épertoir...
GULP
Streaming Build System
2 200+ extensions
Passez du temps à coder au lieu de configurer
Mise en mémoire des fichiers grâ...
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...
- 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 »
GULP
En quelques mots
Extraction des fichiers du disque dur
Transformations dans la mémoire
Réécriture des fichiers sur le d...
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",
"cop...
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",
"cop...
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
|...
gulpfile.js
packages.json
node_modules/
src/
| index.html
| scss/
| | components/
| | | _alerts.scss
| | | _buttons.scss
|...
gulpfile.js
packages.json
node_modules/
src/
| index.html
| scss/
| | components/
| | | _alerts.scss
| | | _buttons.scss
|...
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
[1...
Ligne de commande
> gulp
[14:40:44] Using gulpfile ~/…/gulpfile.js
[14:40:44] Starting 'default'...
Bonjour confoo 2016
[1...
Ligne de commande
> gulp
[14:40:44] Using gulpfile ~/…/gulpfile.js
[14:40:44] Starting 'default'...
Bonjour confoo 2016
[1...
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 2...
Ligne de commande
> gulp confoo
[14:40:44] Using gulpfile ~/…/gulpfile.js
[14:40:44] Starting 'confoo'...
Bonjour confoo 2...
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...
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe...
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe...
gulp.src('src/scss/style.scss')
gulp.src('src/scss/*.scss')
gulp.src('src/scss/**/*.scss')
gulp.src('!src/scss/style.not.s...
gulp.src('src/scss/style.scss')
gulp.src('src/scss/*.scss')
gulp.src('src/scss/**/*.scss')
gulp.src('!src/scss/style.not.s...
gulp.src('src/scss/style.scss')
gulp.src('src/scss/*.scss')
gulp.src('src/scss/**/*.scss')
gulp.src('!src/scss/style.not.s...
gulp.src('src/scss/style.scss')
gulp.src('src/scss/*.scss')
gulp.src('src/scss/**/*.scss')
gulp.src('!src/scss/style.not.s...
gulp.src('src/scss/style.scss')
gulp.src('src/scss/*.scss')
gulp.src('src/scss/**/*.scss')
gulp.src('!src/scss/style.not.s...
// Variables
var paths = {
src: 'src/',
scss: 'src/scss/**/*.scss',
html: 'src/*.html',
assets: 'assets/',
images: 'assets...
// Variables
var paths = {
src: 'src/',
scss: 'src/scss/**/*.scss',
html: 'src/*.html',
assets: 'assets/',
images: 'assets...
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe...
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe...
gulp.dest()
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe...
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe...
gulp.watch()
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe...
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe...
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe...
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe...
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...
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function()
{
gulp.src('public/assets/css/style.css')
.pipe...
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function()
{
gulp.src('public/assets/css/style.css')
.pipe...
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function()
{
gulp.src('public/assets/css/style.css')
.pipe...
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function()
{
gulp.src('public/assets/css/style.css')
.pipe...
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function()
{
gulp.src('public/assets/css/style.css')
.pipe...
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function()
{
gulp.src('public/assets/css/style.css')
.pipe...
« 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 ...
npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-uncss
npm install --save-dev gulp-concat
Ligne de com...
npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-uncss
npm install --save-dev gulp-concat
Ligne de com...
npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-uncss
npm install --save-dev gulp-concat
Ligne de com...
var gulp = require('gulp'), …
gulp.task('styles', function() {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(autoprefixe...
var gulp = require('gulp'), …
gulp.task('styles', function() {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(autoprefixe...
var gulp = require('gulp'), …
gulp.task('styles', function() {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(autoprefixe...
var gulp = require('gulp'), …
gulp.task('styles', function() {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(autoprefixe...
var gulp = require('gulp'), …
gulp.task('styles', function() {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(autoprefixe...
var gulp = require('gulp'), …
gulp.task('styles', function() {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(autoprefixe...
var gulp = require('gulp'), …
gulp.task('styles', function() {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(autoprefixe...
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.repor...
var gulp = require('gulp'), …
gulp.task('scripts', function() {
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.repor...
var gulp = require('gulp'), …
gulp.task('scripts', function() {
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.repor...
var gulp = require('gulp'), …
gulp.task('scripts', function() {
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.repor...
var gulp = require('gulp'), …
gulp.task('scripts', function() {
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.repor...
var gulp = require('gulp'), …
gulp.task('scripts', function() {
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.repor...
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({
optimi...
gulpfile.js
var gulp = require('gulp'), …
gulp.task('images', function() {
gulp.src('src/img/**/*')
.pipe(imagemin({
optimi...
gulpfile.js
var gulp = require('gulp'), …
gulp.task('images', function() {
gulp.src('src/img/**/*')
.pipe(imagemin({
optimi...
gulpfile.js
var gulp = require('gulp'), …
gulp.task('images', function() {
gulp.src('src/img/**/*')
.pipe(imagemin({
optimi...
gulpfile.js
var gulp = require('gulp'), …
gulp.task('images', function() {
gulp.src('src/img/**/*')
.pipe(imagemin({
optimi...
gulpfile.js
var gulp = require('gulp'), …
gulp.task('sprite', function () {
gulp.src('src/img/sprites/*.png')
.pipe(sprites...
gulpfile.js
var gulp = require('gulp'), …
gulp.task('sprite', function () {
gulp.src('src/img/sprites/*.png')
.pipe(sprites...
gulpfile.js
var gulp = require('gulp'), …
gulp.task('sprite', function () {
gulp.src('src/img/sprites/*.png')
.pipe(sprites...
gulpfile.js
var gulp = require('gulp'), …
gulp.task('sprite', function () {
gulp.src('src/img/sprites/*.png')
.pipe(sprites...
gulpfile.js
var gulp = require('gulp'), …
gulp.task('sprite', function () {
gulp.src('src/img/sprites/*.png')
.pipe(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(g...
gulpfile.js
var gulp = require('gulp'), …
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(g...
gulpfile.js
gulp.task('sync', ['sass'], function() {
browserSync.init({
server: 'public'
});
gulp.watch('src/scss/*.scss', ...
gulpfile.js
gulp.task('sync', ['sass'], function() {
browserSync.init({
server: 'public'
});
gulp.watch('src/scss/*.scss', ...
gulpfile.js
gulp.task('sync', ['sass'], function() {
browserSync.init({
server: 'public'
});
gulp.watch('src/scss/*.scss', ...
gulpfile.js
gulp.task('sync', ['sass'], function() {
browserSync.init({
server: 'public'
});
gulp.watch('src/scss/*.scss', ...
Ligne de commande
> gulp sync
[08:02:01] Using gulpfile ~/…/gulpfile.js
[08:02:01] Starting 'sass'...
[08:02:01] Finished ...
Ligne de commande
> gulp sync
[08:02:01] Using gulpfile ~/…/gulpfile.js
[08:02:01] Starting 'sass'...
[08:02:01] Finished ...
Ligne de commande
> gulp sync
[08:02:01] Using gulpfile ~/…/gulpfile.js
[08:02:01] Starting 'sass'...
[08:02:01] Finished ...
Ligne de commande
> gulp sync
[08:02:01] Using gulpfile ~/…/gulpfile.js
[08:02:01] Starting 'sass'...
[08:02:01] Finished ...
- 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-...
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 ...
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é...
Sources
https://speakerdeck.com/jackfranklin/fowa-development-with-gulpjs
https://speakerdeck.com/addyosmani/automating-fr...
Devenez le plus heureux des Front-end avec Gulp.js
Devenez le plus heureux des Front-end avec Gulp.js
Devenez le plus heureux des Front-end avec Gulp.js
Prochain SlideShare
Chargement dans…5
×

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

2 303 vues

Publié le

De nos jours, les projets Web utilisent un nombre grandissant de technologies front-end afin d’effectuer différentes tâches. Utilisées par des compagnies telle qu’Adobe, Twitter et jQuery, Gulp et Grunt vous permettrons d’automatiser des tâches récurrentes liées au développement Web.

Comprenez les différences entre Gulp et Grunt. Apprenez à automatiser les tâches récurrentes et découvrez les possibilités de Gulp à l’aide des extensions essentiels (Validation et compression de JavaScripts avec JSHint et Uglify, Compilation CSS avec SASS et Compass, Synchronisation de navigateurs avec Live Reload et Browser Sync, etc.).

Publié dans : Technologie
0 commentaire
6 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 303
Sur SlideShare
0
Issues des intégrations
0
Intégrations
195
Actions
Partages
0
Téléchargements
50
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 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. 2. Pourquoi automatiser Gulp et Grunt Gulp - Installation et Code Gulp - Extensions
  3. 3. @remysavard HTML CSS JS
  4. 4. Photo: © « Beaucoup d’outils! »
  5. 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. 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. 7. Photo: © « Soyez productifs et efficaces - Automatisez »
  8. 8. Exécutez du JS sur le serveur Exécutez du JS en ligne de commande
  9. 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. 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. 11. Photo: © « Peu importe lequel vous choisissez, Aimez-le et utilisez-le »
  12. 12. - Ashley Nolan @AshNolan_ « I asked 2028 front-end developers: 
 What task runner do you prefer using … »
  13. 13. Gulp: 44% Grunt: 28% - Ashley Nolan @AshNolan_
  14. 14. - Nick DeNardis @nickdenardis « After @gruntjs revolutionized my webdev workflow… »
  15. 15. - Nick DeNardis @nickdenardis « …@gulpjs comes along and optimizes the shit out of it. #iaminlove »
  16. 16. - Sindre Sorhus Yeoman team, NPM contributor - @sindresorhus « Getting started with @gulpjs […] Think @gruntjs, but faster and less config »
  17. 17. - Wes Cruver @WesCruver « Woah, my @gruntjs watch task went from over 2s to 21ms after switching to @gulpjs […] »
  18. 18. - MichaelSharer Developer for @NHL - @MichaelSharer « We at the @NHL use @gulpjs »
  19. 19. GULP En quelques mots Extraction des fichiers du disque dur Transformations dans la mémoire Réécriture des fichiers sur le disque dur
  20. 20. gulp }); gulp }); « CODE »
  21. 21. Installez Node - https://nodejs.org/
  22. 22. GAME CHANGER OF THE YEAR | Nomination
  23. 23. npm install --global gulp npm install --save-dev gulp Créez le fichier gulpfile.js npm init Ligne de commande
  24. 24. npm install --global gulp npm install --save-dev gulp Créez le fichier gulpfile.js npm init Ligne de commande
  25. 25. { "name": "gulp-confoo-2016", "description": "Gulp pour confoo 2016", "version": "1.0.0", "author": "remysavard.com", "copyright": "2016", "devDependencies": {}, "dependencies": {} } package.json
  26. 26. npm install --global gulp npm install --save-dev gulp Créez le fichier gulpfile.js npm init Ligne de commande
  27. 27. { "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
  28. 28. npm install --global gulp npm install --save-dev gulp Créez le fichier gulpfile.js npm init Ligne de commande
  29. 29. 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/
  30. 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. 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. 32. Photo: © « 4 fonctions à retenir »
  33. 33. gulp.task()
  34. 34. var gulp = require('gulp'); gulp.task('default', function() { console.log('Bonjour confoo 2016'); }); gulpfile.js
  35. 35. var gulp = require('gulp'); gulp.task('default', function() { console.log('Bonjour confoo 2016'); }); gulpfile.js
  36. 36. var gulp = require('gulp'); gulp.task('default', function() { console.log('Bonjour confoo 2016'); }); gulpfile.js
  37. 37. var gulp = require('gulp'); gulp.task('default', function() { console.log('Bonjour confoo 2016'); }); gulpfile.js
  38. 38. 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
  39. 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. 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. 41. var gulp = require('gulp'); gulp.task('confoo', function() { console.log('Bonjour confoo 2016'); }); gulpfile.js
  42. 42. 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
  43. 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. 44. gulp.src()
  45. 45. Compilation de fichiers .scss en .css SASS
  46. 46. npm install --save-dev gulp-sass Ligne de commande
  47. 47. 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
  48. 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. 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. 50. 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
  51. 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. 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. 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. 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. 55. // 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
  56. 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. 57. 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
  58. 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. 59. gulp.dest()
  60. 60. 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. 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. 62. gulp.watch()
  63. 63. 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
  64. 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. 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. 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. 67. Dépendance des tâches
  68. 68. Compilation de fichiers .scss en .css Minification des fichiers CSS Renommer les fichiers avec l’extension .min.css CSS
  69. 69. npm install --save-dev gulp-csso npm install --save-dev gulp-rename Ligne de commande
  70. 70. npm install --save-dev gulp-csso npm install --save-dev gulp-rename Ligne de commande
  71. 71. 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
  72. 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. 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. 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. 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. 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. 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. 78. « Vous êtes prêt !!! »
  79. 79. Photo: © « Extensions - Point de départ »
  80. 80. Réduire la quantité de Requêtes HTTP Réduire le poids des fichiers Performances Web
  81. 81. 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
  82. 82. npm install --save-dev gulp-autoprefixer npm install --save-dev gulp-uncss npm install --save-dev gulp-concat Ligne de commande
  83. 83. npm install --save-dev gulp-autoprefixer npm install --save-dev gulp-uncss npm install --save-dev gulp-concat Ligne de commande
  84. 84. npm install --save-dev gulp-autoprefixer npm install --save-dev gulp-uncss npm install --save-dev gulp-concat Ligne de commande
  85. 85. 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
  86. 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. 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. 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. 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. 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. 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. 92. Rapports d’erreurs avec JSHint Concaténation de fichiers JS Minification Uglify de fichiers JS JavaScript
  93. 93. npm install --save-dev gulp-jshint npm install --save-dev gulp-uglify Ligne de commande
  94. 94. npm install --save-dev gulp-jshint npm install --save-dev gulp-uglify Ligne de commande
  95. 95. 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
  96. 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. 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. 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. 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. 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. 101. Optimisation d’images (PNG, JPEG, GIF, SVG) Génération de sprites Images
  102. 102. npm install --save-dev gulp-imagemin npm install --save-dev gulp-spritesmith Ligne de commande
  103. 103. npm install --save-dev gulp-imagemin npm install --save-dev gulp.spritesmith Ligne de commande
  104. 104. 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')); });
  105. 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. 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. 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. 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. 109. 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')); });
  110. 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. 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. 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. 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. 114. Synchronisation d’appareils + Live Reload Cmd+S, Cmd+Tab, Cmd+R
  115. 115. npm install --save-dev browser-sync Ligne de commande OPEN SOURCE PROJECT OF THE YEAR | Nomination
  116. 116. gulpfile.js var gulp = require('gulp'), … gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(gulp.dest('public/assets/css')) });
  117. 117. 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()); });
  118. 118. gulpfile.js gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']); });
  119. 119. gulpfile.js gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']); });
  120. 120. gulpfile.js gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']); });
  121. 121. gulpfile.js gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']); });
  122. 122. 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
  123. 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. 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. 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. 126. - Adam Tomat @adamtoma « Starting the day testing; @BrowserSync making life much easier  »
  127. 127. Photo: © « Extensions - C’est tout? »
  128. 128. 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
  129. 129. Photo: © « Soyez productifs et efficaces - Automatisez »
  130. 130. 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
  131. 131. Photo: © « Êtes-vous plus heureux ? »
  132. 132. 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
  133. 133. 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/

×