gulp
Guide complet pour une automatisation du workflow frontal avec Gulpjs -1 of 2
Recherche…
Syntaxe
- npm install [nom-plugin] --save-dev
- npm install [nom du plugin] --save
- Fonction
<function-name>(glob) {$ .src (glob) .pipe ([plug-in 1]). Pipe ([plug-in 2]) .... pipe ([plug-in]). Pipe ($ .dest (<destination-name>)} -
$.task(<taskname> , [dependencies] , <body>);
Remarques
Les références
Chargement de tous les plugins de Package.JSON
En supposant que vous compreniez comment installer Gulp, penchons-nous sur la nécessité d'exiger toutes les dépendances gulp de package.json dans le dossier racine de vos projets.
Si vous n'avez pas encore de fichier gulpfile, veuillez créer un fichier vide avec le nom
gulpfile.js
Tout d'abord, nous avons besoin de goûter. ainsi:
var $ = require('gulp');
Ensuite, nous allons charger tous nos plug-ins dans notre fichier gulpfich, par l'extrait ci-dessous
Remarque
S'il vous plaît lire les commentaires dans tous les extraits que nous allons inclure dans cette lecture, ils fournissent plus d'informations sur chaque fonctionnalité
/*
require gulp-load-plugins, and call it
gulp-load-plugins will require individually,
all the plugins installed in package.json at the root directory
these required plugins, are lazy loaded
that is, gulp-load-plugins will only require them when they are referenced in this file
plugins are available for perusal, via camelcased names, minus gulp
eg: gulp-clean-css is accessed by $$.cleanCss
*/
var $$ = require('gulp-load-plugins')();
REMARQUE
Dans tous les nombreux exemples que nous aurons dans l'article, nous alias
- gulp comme $ et
- gulp-load-plugins en tant que $$
uniquement pour faciliter la saisie.
Installation de plugins pour des images réactives | Css Minification | Js minification
Notre but est de
- Rendez vos images conformes aux largeurs et aux échelles appropriées en générant une batterie d'images de largeurs variées et en les réduisant
- Lint votre Javascript
- Minimisez vos ressources - JS / CSS / HTML, vous permettant ainsi d’héberger un code plus léger que le code le plus léger
- Regarder les fichiers css / js / image pour le changement et reconstruire les optimisations
- Synchroniser vos modifications en cours de développement sur un navigateur servant votre site.
Nous avons besoin d'un certain nombre de plugins, alors installons-les tous. Veuillez exécuter tous ces éléments dans le dossier racine du projet.
Plugins de traitement d'images
bash $ npm install --save-dev gulp-responsive
bash $ npm install --save-dev gulp-imagemin
bash $ npm install --save-dev imagemin
bash $ npm install --save-dev imagemin-jpeg-recompress
bash $ npm install --save-dev imagemin-pngquant
Plugins d'optimisation d'actifs
bash $ npm install --save-dev gulp-clean-css
bash $ npm install --save-dev gulp-uglify
bash $ npm install --save-dev gulp-minify-html
bash $ npm install --save-dev gulp-jshint
bash $ npm install --save-dev gulp-concat
bash $ npm install --save-dev gulp-autoprefixer
Anatomie d'une fonction gulp
[Function <name>] (glob) {
$.src(glob)
.pipe([plugin 1])
.pipe([plugin 2])
.
.
.
.pipe([plugin n])
.pipe( $.dest(<destination-name>)
}
Remarque
pipe est une méthode qui diffuse tous les fichiers correspondant à l'entrée glob, à nos plugins (minifyhtml dans ce cas).
Il est simple de l’imaginer ainsi:
$ .src est ce qui construit le flux et les tubes de canalisation pour chaque fichier correspondant au glob vers le bas. Chaque plugin dans lequel le fichier est passé modifie son contenu en mémoire jusqu'à ce que $ .dest soit atteint / crée des fichiers diffusés par $ .src
Où ,
$ -> gulp
$$ -> gulp-load-plugins
Optimisation des actifs et réduction
Donc, avant d’écrire les fonctions d’optimiseur, nous devons installer deux plugins de mise en cache.
bash $ npm install --save-dev gulp-cached
bash $ npm install --save-dev gulp-remember
Vous pourriez vous demander pourquoi deux caches hein! gulp-caché , ne transmet que du contenu modifié ou nouveau dans le pipeline aux autres plug-ins. Donc, comme nous voulons que les fichiers sans changement soient utilisés pour concaténer dans un seul fichier par élément (css | js) également, nous avons besoin de gulp-remember en plus de gulp-caché
Nous utilisons d'abord gulp-cached pour construire une liste de fichiers qui ont changé
Deuxièmement, n'oubliez pas de garder en mémoire tous les fichiers transmis par cette liste.
Première exécution: aucun fichier n'est mis en cache, donc gulp-caché les transmettra tous à gulp-remember
Exécutions suivantes: seuls les fichiers modifiés ou nouveaux sont redirigés par gulp-caché. Comme le contenu du fichier actuel a changé, gulp-remember met à jour son cache.
Cool, laissez-nous écrire notre premier optimiseur
Optimiseur de style
// Goal
/*
1. cache existing files on the first run
2. each file ,
a. Is autoprefixed with cross browser compatible prefixes for any css property ( justify-content for e.g)
b. Is concatenated into app.css
3. app.css is minified
4. On subsequent runs , the above process is implemented on file modifications/additions only
*/
/*
*@src - input a glob pattern - a string eg 'images/**/*' or '**/*.css' or, an array eg ['glob1','glob2']
*/
var optimizeStyles = function(src) {
return $.src(src).
pipe($$.cached('styles')).
pipe($$.autoprefixer({
browsers: ['last 2 versions']
})).
pipe($$.remember('auto-prefixed-stylesheets')).
pipe($$.concat('app.css')).
pipe($.dest('build/css')).
pipe($$.cleanCss()).
pipe($$.rename({
suffix: '.min'
})).
pipe($.dest('build/css'))
}
Remarque
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> construit les flux de fichiers correspondant au glob passé en src
$ .dest -> enregistre le fichier manipulé dans le chemin spécifié
Optimiseur de script
// Goal
/*
1. cache existing files on the first run
2. each file ,
a. Is linted with jshint
b. Is concatenated into app.js
3. app.js is minified
4. On subsequent runs , the above process is implemented on file modifications/additions only
*/
/*
*@src - input a glob pattern - a string eg 'js/**/*' or '**/*.js' or, an array eg ['glob1','glob2']
*/
var optimizeScripts = function(src) {
return $.src(src).
pipe($$.cached('scripts')).
pipe($$.jshint()).
pipe($$.jshint.reporter('default')).
pipe($$.jshint.reporter('fail')).
pipe($$.remember('linted-scripts')).
pipe($$.concat('app.js')).
pipe($.dest('build/js')).
pipe($$.uglify()).
pipe($$.rename({
suffix: '.min'
})).
pipe($.dest('build/js'))
}
Remarque
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> construit les flux de fichiers correspondant au glob passé en src
$ .dest -> enregistre le fichier manipulé dans le chemin spécifié
Générer des images réactives
Passons maintenant au traitement de l'image. Donc, le but est d'avoir un tableau de tailles pour chaque image que vous allez servir.
Pourquoi?
Eh bien, pour comprendre pourquoi nous avons besoin d'une batterie d'images avec une gamme de largeurs, nous devons réfléchir au fait qu'il y a probablement des milliards d'appareils avec des résolutions variées. Nous avons besoin d'une image à l'échelle sans trop de pixellisation. En même temps, nous devons améliorer les temps de chargement des pages en téléchargeant uniquement l’image, qui correspond à la largeur dans laquelle elle se trouve, et dont la dimension est également la plus petite possible. Il y a des blogs savants comme celui que Eric Portis a écrit, qui souligne l'inefficacité des requêtes de médias et sert de guide complet pour comprendre des concepts tels que srcsets et tailles.
Vous pouvez vous référer à l'épopée d'Eric Portis ici
Maintenant, notre fonction, doit prendre un glob, et une largeur comme entrées, et faire sa magie et pousser le fichier que chaque exécution génère, à une destination et réduire l'image réactivée.
Nous avons installé deux plugins de compression d'image dans notre premier exemple
Comme ces plugins NE commencent PAS par un préfixe "gulp-", nous devons les charger manuellement sur notre fichier gulpfile.
SO Exigeons-les manuellement, après la déclaration gulp-load-plugins en haut de notre fichier gulpfile.
ainsi:
var compressJpg = require('imagemin-jpeg-recompress');
var pngquant = require('imagemin-pngquant');
Il est intéressant de noter que gulp-responsive est livré avec un processeur d'image pointu, ce qui est mieux que imagemagick BY FAAAAR !. Sharp est ce que gulp-responsive utilise pour rogner vos images à la largeur désirée.
Vous pouvez regarder gulp-responsive-configuration-options pour une liste complète des paramètres de configuration. Je n'ai utilisé que
- width - pour rogner nos images à une largeur w, passé en paramètre
- rename - pour ajouter un suffixe au nom de l'image, de sorte qu'il reste unique
dans ma fonction de configuration ci-dessous. Ainsi, notre fonction va recadrer l'image à la largeur transmise en entrée, pour toutes les images correspondantes déchiffrées via l'entrée glob. Ensuite, chaque image est compressée en utilisant jpeg-recompress ou pngquant et enregistrée dans build / images.
Dans cet esprit, notre fonction serait comme suit:
/*
@generateResponsiveImages
*@Description:takes in a src of globs, to stream matching image files , a width,
*to resize the matching image to, and a dest to write the resized and minified files to
*@src - input a glob pattern - a string eg 'images/** /*' or 'images/*' or, an array
eg ['glob1','glob2']
*@return returns a stream
*/
var generateResponsiveImages = function(src, width, dest) {
//declare a default destination
if (!dest)
dest = 'build/images';
//case 1: src glob - images/**/*
// the base is the directory immediately preceeding the glob - images/ in this case
//case 2: images/fixed/flourish.png : the base here is images/fixed/ - we are overriding
// that by setting base to images.This is done so that, the path beginning after images/
// - is the path under our destination - without us setting the base, dest would be,
//build/images/flourish.png.But with us setting the base, the destination would be
// build/images/fixed/flourish.png
return $.src(src, {
base: 'images'
})
//generate resized images according to the width passed
.pipe($$.responsive({
//match all pngs within the src stream
'**/*.png': [{
width: width,
rename: {
suffix: '-' + width
},
withoutEnlargement: false,
}],
//match all jpgs within the src stream
'**/*.jpg': [{
width: width,
rename: {
suffix: '-' + width
},
progressive: true,
withoutEnlargement: false,
}]
}, {
errorOnEnlargement: false,
errorOnUnusedConfig: false,
errorOnUnusedImage: false
}))
//once the file is resized to width, minify it using the plugins available per format
.pipe($$.if('*.jpg', compressJpg({
min: 30,
max: 90,
target: 0.5
})()))
//use file based cache gulp-cache and it will minify only changed or new files
//if it is not a new file and if the contents havent changed, the file is served from cache
.pipe($$.cache($$.imagemin({
verbose: true
})))
//write to destination - dest + path from base
.pipe($.dest(dest));
}
Remarque
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> construit les flux de fichiers correspondant au glob passé en src
$ .dest -> enregistre le fichier manipulé dans le chemin spécifié
Autres références
Minificateur HTML
*
*@minifyHtml
*Description:takes in a glob src, and minifies all '.html' files matched by the glob
*@src - input a glob pattern - a string eg '/**/*.html /*' or '*.html' or, an array eg ['glob1','glob2']
*@dest=file.base means, the modified html file will be in the same directory as the src file being minified
*often means, the process is just a modification on the existing src file
*@return returns a stream
*/
var minifyHtml = function(src) {
return $.src(src)
.pipe($$.minifyHtml())
.pipe($.dest(function(file) {
//file is provided to a dest callback -
// Refer here https://github.com/gulpjs/gulp/blob/master/docs/API.md#path
return file.base;
}));
}
Anatomie d'une tâche de gulp
L'anatomie d'une définition de tâche est comme suit:
$.task(<taskname> , [dependencies] , <body>);
dépendances, est un tableau de tâches qui doivent être terminées avant l'exécution de la tâche en cours. Plus comme forcer une exécution synchrone au lieu de la fonctionnalité asynchrone par défaut.
Ajout de tâches Gulp
Donc, nous avons maintenant
- Une fonction définie ci-dessus pour optimiser les styles
- Une fonction définie ci-dessus pour optimiser les scripts
- Une fonction définie ci-dessus pour optimiser le HTML
- Une fonction pour générer plusieurs images par image ci-dessus
Tout ce que nous devons faire maintenant, c'est de les invoquer en cas de besoin.
Écrivons nos tâches selon la syntaxe définie précédemment
/*
* $.task('name','dependency array',function)
results in building a task object as below
task:{
'name':name,
'dep':[array of dependencies],
'fn':function
}
*/
//*@return returns a stream to notify on task completion
$.task('optimizeHtml', function() {
var src = ['**/*.html', '!{node_modules}/**/*.html'];
return minifyHtml(src);
});
//*@return returns a stream to notify on task completion
$.task('optimizeScripts', function() {
var src = ['js/**/*.js'];
return optimizeScripts(src);
});
//*@return returns a stream to notify on task completion
$.task('optimizeStyles', function() {
var src = ['css/**/*.css', 'fonts/google/**/*.css'];
return optimizeStyles(src);
});
//Take in a callback to ensure notifying the gulp engine, that the task is done
//required since, you are not returning a stream in this task
$.task('generateResponsiveImages', function(callback) {
var src = ['images/**/*.{jpg,png}'];
for (var i = widths.length - 1; i >= 0; i--) {
generateResponsiveImages(src, widths[i]);
}
callback();
});