Mais conteúdo relacionado Semelhante a Devenez le plus heureux des Front-end avec Gulp.js (20) Devenez le plus heureux des Front-end avec Gulp.js1. Gulp
Devenez le plus heureux des front-end
Rémy Savard
Développeur web et formateur/conférencier
remysavard.com | @remysavard | /in/remysavard
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)
…
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
16. - Sindre Sorhus
Yeoman team, NPM contributor - @sindresorhus
« Getting started with @gulpjs […]
Think @gruntjs, but faster and less config »
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
27. npm install --global gulp
npm install --save-dev gulp
Créez le fichier gulpfile.js
npm init
Ligne de commande
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/
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
48. var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulpfile.js
49. var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulpfile.js
50. var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulpfile.js
56. // Variables
var paths = {
src: 'src/',
scss: 'src/scss/**/*.scss',
html: 'src/*.html',
assets: 'assets/',
images: 'assets/img/**/*',
css: 'assets/css/**/*.css',
scripts: 'assets/js/**/*.js'
};
gulp.src(paths.scss)
gulpfile.js
57. // Variables
var paths = {
src: 'src/',
scss: 'src/scss/**/*.scss',
html: 'src/*.html',
assets: 'assets/',
images: 'assets/img/**/*',
css: 'assets/css/**/*.css',
scripts: 'assets/js/**/*.js'
};
gulp.src(paths.scss)
gulpfile.js
58. var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulpfile.js
59. var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulpfile.js
61. var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulpfile.js
62. var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulpfile.js
64. var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulp.task('watch', function () {
gulp.watch('src/scss/*.scss', ['sass']);
});
gulpfile.js
65. var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulp.task('watch', function () {
gulp.watch('src/scss/*.scss', ['sass']);
});
gulpfile.js
66. var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulp.task('watch', function () {
gulp.watch('src/scss/*.scss', ['sass']);
});
gulpfile.js
67. var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/assets/css'));
});
gulp.task('watch', function () {
gulp.watch('src/scss/*.scss', ['sass']);
});
gulpfile.js
69. Compilation de fichiers .scss en .css
Minification des fichiers CSS
Renommer les fichiers avec l’extension .min.css
CSS
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
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
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
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'));
});
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());
});
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
133. Configurez-le à votre goût
Réutilisez vos recettes
Itérez et améliorez votre gabarit
Souriez et soyez heureux
Débutez avec un gabarit
135. Rémy Savard
Développeur web et formateur/conférencier
remysavard.com | @remysavard | /in/remysavard
MERCI
« Besoin d’un développeur Web
ou d’une formation »
remysavard.com