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

2 569 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 569
Sur SlideShare
0
Issues des intégrations
0
Intégrations
167
Actions
Partages
0
Téléchargements
59
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/

×