Embed Size (px)
Citation preview
GulpDevenez le plus heureux des front-end
Rémy SavardDéveloppeur web et formateur/conférencierremysavard.com | @remysavard | /in/remysavard
Pourquoi automatiser
Gulp et Grunt
Gulp - Installation et Code
Gulp - Extensions
@remysavard
HTML
CSS
JS
Photo: ©
« Beaucoup d’outils! »
Photo: ©
Syntaxe et balisage (Haml, Markdown)
Templates (Underscore, Handlebars, Jade)
Tests et erreurs (W3C, JSHint, Mocha, Karma)
Préprocesseur CSS (Sass, Less, Stylus, Compass)
Préprocesseur JavaScript (CoffeeScript, TypeScript)
Minification de fichiers CSS et JS (Uglify, CodeKit)
Concaténation de fichiers CSS et JS (CodeKit)
Optimisation d’image (TinyPNG, CodeKit)
Génération de sprites (SpriteCow)
…
Photo: ©
« L’écosystème des outils devient de plus en plus complexe, mais vous devez
les connaître, les utiliser et les aimer »
Photo: ©
« Soyez productifs et efficaces - Automatisez »
Exécutez du JS sur le serveur
Exécutez du JS en ligne de commande
GRUNTJavaScript Task Runner
5 500+ extensions
Passez du temps à configurer vos extensions
Utilise des fichiers et répertoires temporaires
Exécute l'une après l'autre les tâches
OPEN SOURCE PROJECT OF THE YEAR | Winner
GULPStreaming Build System
2 200+ extensions
Passez du temps à coder au lieu de configurer
Mise en mémoire des fichiers grâce aux Streams
Exécute les tâches en concurrence maximum
OPEN SOURCE PROJECT OF THE YEAR | Nomination
Photo: ©
« Peu importe lequel vous choisissez, Aimez-le et utilisez-le »
- Ashley Nolan @AshNolan_
« I asked 2028 front-end developers: What task runner do you prefer using … »
- Nick DeNardis @nickdenardis
« After @gruntjs revolutionized my webdev workflow… »
- Nick DeNardis @nickdenardis
« …@gulpjs comes along and optimizes the shit out of it. #iaminlove »
- Sindre Sorhus Yeoman team, NPM contributor - @sindresorhus
« Getting started with @gulpjs […] Think @gruntjs, but faster and less config »
- Wes Cruver @WesCruver
« Woah, my @gruntjs watch task went from over 2s to 21ms after switching to @gulpjs […] »
- MichaelSharer Developer for @NHL - @MichaelSharer
« We at the @NHL use @gulpjs »
GULPEn quelques mots
Extraction des fichiers du disque dur
Transformations dans la mémoire
Réécriture des fichiers sur le disque dur
gulp });
gulp });
« CODE »
GAME CHANGER OF THE YEAR | Nomination
npm install --global gulp
npm install --save-dev gulp
Créez le fichier gulpfile.js
npm init
Ligne de commande
npm install --global gulp
npm install --save-dev gulp
Créez le fichier gulpfile.js
npm init
Ligne de commande
{ "name": "gulp-confoo-2016", "description": "Gulp pour confoo 2016", "version": "1.0.0", "author": "remysavard.com", "copyright": "2016", "devDependencies": {}, "dependencies": {}}
package.json
npm install --global gulp
npm install --save-dev gulp
Créez le fichier gulpfile.js
npm init
Ligne de commande
{ "name": "gulp-confoo-2016", "description": "Gulp pour confoo 2016", "version": "1.0.0", "author": "remysavard.com", "copyright": "2016", "devDependencies": { "gulp": "^3.9.1" }, "dependencies": {}}
package.json
npm install --global gulp
npm install --save-dev gulp
Créez le fichier gulpfile.js
npm init
Ligne de commande
gulpfile.jspackages.jsonnode_modules/src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.pngpublic/ | index.html | assets/ | | css/ | | | style.css | | | style.min.css | | js/ | | | script.js | | | script.min.js | | img/
gulpfile.jspackages.jsonnode_modules/src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.pngpublic/ | index.html | assets/ | | css/ | | | style.css | | | style.min.css | | js/ | | | script.js | | | script.min.js | | img/
gulpfile.jspackages.jsonnode_modules/src/ | index.html | scss/ | | components/ | | | _alerts.scss | | | _buttons.scss | | style.scss | js/ | | jquery.validate.js | | fastclick.js | | script.js | img/ | | image-xl.pngpublic/ | index.html | assets/ | | css/ | | | style.css | | | style.min.css | | js/ | | | script.js | | | script.min.js | | img/
Photo: ©
« 4 fonctions à retenir »
gulp.task()
var gulp = require('gulp');
gulp.task('default', function() {console.log('Bonjour confoo 2016');
});
gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {console.log('Bonjour confoo 2016');
});
gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {console.log('Bonjour confoo 2016');
});
gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {console.log('Bonjour confoo 2016');
});
gulpfile.js
Ligne de commande
> gulp[14:40:44] Using gulpfile ~/…/gulpfile.js[14:40:44] Starting 'default'...Bonjour confoo 2016[14:40:44] Finished 'default' after 75 μs
Ligne de commande
> gulp[14:40:44] Using gulpfile ~/…/gulpfile.js[14:40:44] Starting 'default'...Bonjour confoo 2016[14:40:44] Finished 'default' after 75 μs
Ligne de commande
> gulp[14:40:44] Using gulpfile ~/…/gulpfile.js[14:40:44] Starting 'default'...Bonjour confoo 2016[14:40:44] Finished 'default' after 75 μs
var gulp = require('gulp');
gulp.task('confoo', function() {console.log('Bonjour confoo 2016');
});
gulpfile.js
Ligne de commande
> gulp confoo[14:40:44] Using gulpfile ~/…/gulpfile.js[14:40:44] Starting 'confoo'...Bonjour confoo 2016[14:40:44] Finished 'confoo' after 75 μs
Ligne de commande
> gulp confoo[14:40:44] Using gulpfile ~/…/gulpfile.js[14:40:44] Starting 'confoo'...Bonjour confoo 2016[14:40:44] Finished 'confoo' after 75 μs
gulp.src()
Compilation de fichiers .scss en .css
SASS
npm install --save-dev gulp-sass
Ligne de commande
var gulp = require('gulp'),sass = require('gulp-sass');
gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'));});
gulpfile.js
var gulp = require('gulp'),sass = require('gulp-sass');
gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'));});
gulpfile.js
var gulp = require('gulp'),sass = require('gulp-sass');
gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'));});
gulpfile.js
gulp.src('src/scss/style.scss')
gulp.src('src/scss/*.scss')
gulp.src('src/scss/**/*.scss')
gulp.src('!src/scss/style.not.scss')
gulp.src('*.+(js|css)')
gulpfile.js
gulp.src('src/scss/style.scss')
gulp.src('src/scss/*.scss')
gulp.src('src/scss/**/*.scss')
gulp.src('!src/scss/style.not.scss')
gulp.src('*.+(js|css)')
gulpfile.js
gulp.src('src/scss/style.scss')
gulp.src('src/scss/*.scss')
gulp.src('src/scss/**/*.scss')
gulp.src('!src/scss/style.not.scss')
gulp.src('*.+(js|css)')
gulpfile.js
gulp.src('src/scss/style.scss')
gulp.src('src/scss/*.scss')
gulp.src('src/scss/**/*.scss')
gulp.src('!src/scss/style.not.scss')
gulp.src('*.+(js|css)')
gulpfile.js
gulp.src('src/scss/style.scss')
gulp.src('src/scss/*.scss')
gulp.src('src/scss/**/*.scss')
gulp.src('!src/scss/style.not.scss')
gulp.src('*.+(js|css)')
gulpfile.js
// Variablesvar paths = { src: 'src/', scss: 'src/scss/**/*.scss', html: 'src/*.html', assets: 'assets/', images: 'assets/img/**/*', css: 'assets/css/**/*.css', scripts: 'assets/js/**/*.js'};
gulp.src(paths.scss)
gulpfile.js
// Variablesvar paths = { src: 'src/', scss: 'src/scss/**/*.scss', html: 'src/*.html', assets: 'assets/', images: 'assets/img/**/*', css: 'assets/css/**/*.css', scripts: 'assets/js/**/*.js'};
gulp.src(paths.scss)
gulpfile.js
var gulp = require('gulp'),sass = require('gulp-sass');
gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'));});
gulpfile.js
var gulp = require('gulp'),sass = require('gulp-sass');
gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'));});
gulpfile.js
gulp.dest()
var gulp = require('gulp'),sass = require('gulp-sass');
gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'));});
gulpfile.js
var gulp = require('gulp'),sass = require('gulp-sass');
gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'));});
gulpfile.js
gulp.watch()
var gulp = require('gulp'),sass = require('gulp-sass');
gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'));});
gulp.task('watch', function () { gulp.watch('src/scss/*.scss', ['sass']);});
gulpfile.js
var gulp = require('gulp'),sass = require('gulp-sass');
gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'));});
gulp.task('watch', function () { gulp.watch('src/scss/*.scss', ['sass']);});
gulpfile.js
var gulp = require('gulp'),sass = require('gulp-sass');
gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'));});
gulp.task('watch', function () { gulp.watch('src/scss/*.scss', ['sass']);});
gulpfile.js
var gulp = require('gulp'),sass = require('gulp-sass');
gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'));});
gulp.task('watch', function () { gulp.watch('src/scss/*.scss', ['sass']);});
gulpfile.js
Dépendance des tâches
Compilation de fichiers .scss en .css
Minification des fichiers CSS
Renommer les fichiers avec l’extension .min.css
CSS
npm install --save-dev gulp-csso
npm install --save-dev gulp-rename
Ligne de commande
npm install --save-dev gulp-csso
npm install --save-dev gulp-rename
Ligne de commande
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('minify-css', ['sass'], function() { gulp.src('public/assets/css/style.css') .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
« Vous êtes prêt !!! »
Photo: ©
« Extensions - Point de départ »
Réduire la quantité de Requêtes HTTP
Réduire le poids des fichiers
Performances Web
Compilation de fichiers .scss en .css
Ajout automatique de préfixes avec Can I Use
Concaténation de fichiers CSS
Suppression des CSS inutilisés
Minification des fichiers CSS
Renommer les fichiers avec l’extension .min.css
CSS
npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-uncss
npm install --save-dev gulp-concat
Ligne de commande
npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-uncss
npm install --save-dev gulp-concat
Ligne de commande
npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-uncss
npm install --save-dev gulp-concat
Ligne de commande
var gulp = require('gulp'), …
gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))
.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))
.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))
.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))
.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))
.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))
.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('styles', function() { gulp.src('src/scss/*.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('public/assets/css'))
.pipe(concat('all.css')) .pipe(gulp.dest('public/assets/css/')) .pipe(uncss({html: ['public/index.html']})) .pipe(csso()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/css/'));});
gulpfile.js
Rapports d’erreurs avec JSHint
Concaténation de fichiers JS
Minification Uglify de fichiers JS
JavaScript
npm install --save-dev gulp-jshint
npm install --save-dev gulp-uglify
Ligne de commande
npm install --save-dev gulp-jshint
npm install --save-dev gulp-uglify
Ligne de commande
var gulp = require('gulp'), …
gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))
.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))
.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))
.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))
.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))
.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('scripts', function() { gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(concat('script.js')) .pipe(gulp.dest('public/assets/js'))
.pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('public/assets/js'));});
gulpfile.js
Optimisation d’images (PNG, JPEG, GIF, SVG)
Génération de sprites
Images
npm install --save-dev gulp-imagemin
npm install --save-dev gulp-spritesmith
Ligne de commande
npm install --save-dev gulp-imagemin
npm install --save-dev gulp.spritesmith
Ligne de commande
gulpfile.js
var gulp = require('gulp'), …
gulp.task('images', function() { gulp.src('src/img/**/*') .pipe(imagemin({
optimizationLevel: 3, progressive: true,
interlaced: true}))
.pipe(gulp.dest('public/assets/img'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('images', function() { gulp.src('src/img/**/*') .pipe(imagemin({
optimizationLevel: 3, progressive: true,
interlaced: true}))
.pipe(gulp.dest('public/assets/img'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('images', function() { gulp.src('src/img/**/*') .pipe(imagemin({
optimizationLevel: 3, progressive: true,
interlaced: true}))
.pipe(gulp.dest('public/assets/img'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('images', function() { gulp.src('src/img/**/*') .pipe(imagemin({
optimizationLevel: 3, progressive: true,
interlaced: true}))
.pipe(gulp.dest('public/assets/img'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('images', function() { gulp.src('src/img/**/*') .pipe(imagemin({
optimizationLevel: 3, progressive: true,
interlaced: true}))
.pipe(gulp.dest('public/assets/img'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('sprite', function () { gulp.src('src/img/sprites/*.png') .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })) .pipe(gulp.dest('public/assets/img/sprites'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('sprite', function () { gulp.src('src/img/sprites/*.png') .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })) .pipe(gulp.dest('public/assets/img/sprites'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('sprite', function () { gulp.src('src/img/sprites/*.png') .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })) .pipe(gulp.dest('public/assets/img/sprites'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('sprite', function () { gulp.src('src/img/sprites/*.png') .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })) .pipe(gulp.dest('public/assets/img/sprites'));});
gulpfile.js
var gulp = require('gulp'), …
gulp.task('sprite', function () { gulp.src('src/img/sprites/*.png') .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })) .pipe(gulp.dest('public/assets/img/sprites'));});
Synchronisation d’appareils + Live Reload
Cmd+S, Cmd+Tab, Cmd+R
npm install --save-dev browser-sync
Ligne de commande
OPEN SOURCE PROJECT OF THE YEAR | Nomination
gulpfile.js
var gulp = require('gulp'), … gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'))});
gulpfile.js
var gulp = require('gulp'), … gulp.task('sass', function () { gulp.src('src/scss/*.scss') .pipe(sass())
.pipe(gulp.dest('public/assets/css'))
.pipe(browserSync.stream());});
gulpfile.js
gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']);});
gulpfile.js
gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']);});
gulpfile.js
gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']);});
gulpfile.js
gulp.task('sync', ['sass'], function() { browserSync.init({ server: 'public' }); gulp.watch('src/scss/*.scss', ['sass']);});
Ligne de commande
> gulp sync[08:02:01] Using gulpfile ~/…/gulpfile.js[08:02:01] Starting 'sass'...[08:02:01] Finished 'sass' after 5.51 ms[08:02:01] Starting 'sync'...[08:02:02] Finished 'sync' after 21 ms[BS] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://10.0.1.8:3000 ---------------------------------- UI: http://localhost:3001 UI External: http://10.0.1.8:3001 ----------------------------------[BS] Serving files from: public
Ligne de commande
> gulp sync[08:02:01] Using gulpfile ~/…/gulpfile.js[08:02:01] Starting 'sass'...[08:02:01] Finished 'sass' after 5.51 ms[08:02:01] Starting 'sync'...[08:02:02] Finished 'sync' after 21 ms[BS] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://10.0.1.8:3000 ---------------------------------- UI: http://localhost:3001 UI External: http://10.0.1.8:3001 ----------------------------------[BS] Serving files from: public
Ligne de commande
> gulp sync[08:02:01] Using gulpfile ~/…/gulpfile.js[08:02:01] Starting 'sass'...[08:02:01] Finished 'sass' after 5.51 ms[08:02:01] Starting 'sync'...[08:02:02] Finished 'sync' after 21 ms[BS] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://10.0.1.8:3000 ---------------------------------- UI: http://localhost:3001 UI External: http://10.0.1.8:3001 ----------------------------------[BS] Serving files from: public
Ligne de commande
> gulp sync[08:02:01] Using gulpfile ~/…/gulpfile.js[08:02:01] Starting 'sass'...[08:02:01] Finished 'sass' after 5.51 ms[08:02:01] Starting 'sync'...[08:02:02] Finished 'sync' after 21 ms[BS] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://10.0.1.8:3000 ---------------------------------- UI: http://localhost:3001 UI External: http://10.0.1.8:3001 ----------------------------------[BS] Serving files from: public
- Adam Tomat @adamtoma
« Starting the day testing; @BrowserSync making life much easier »
Photo: ©
« Extensions - C’est tout? »
Photo: ©
Extensions intéressantes
gulp-util
gulp-clean
gulp-cached
gulp-changed
gulp-remember
gulp-bower
gulp-notify
gulp-compass
gulp-inject
gulp-react
gulp-load-plugins
gulp-mocha
gulp-jasmine
gulp-template
Photo: ©
« Soyez productifs et efficaces - Automatisez »
Configurez-le à votre goût
Réutilisez vos recettes
Itérez et améliorez votre gabarit
Souriez et soyez heureux
Débutez avec un gabarit
Photo: ©
« Êtes-vous plus heureux ? »
Rémy SavardDéveloppeur web et formateur/conférencierremysavard.com | @remysavard | /in/remysavard
MERCI
« Besoin d’un développeur Webou d’une formation »
remysavard.com
Sourceshttps://speakerdeck.com/jackfranklin/fowa-development-with-gulpjs
https://speakerdeck.com/addyosmani/automating-front-end-workflow
https://medium.com/@contrahacks/gulp-3828e8126466
http://www.smashingmagazine.com/2014/06/11/building-with-gulp/
http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt/
http://markgoodyear.com/2014/01/getting-started-with-gulp/
http://www.smashingmagazine.com/2014/06/11/building-with-gulp/
https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js
https://github.com/substack/stream-handbook
https://github.com/gulpjs/
