gulp
Guida completa all'automazione del flusso di lavoro front-end con Gulpjs -1 di 2
Ricerca…
Sintassi
- npm install [nome-plugin] --save-dev
- npm install [nome-plugin] --save
- Funzione
<function-name>(glob) {$ .src (glob) .pipe ([plugin 1]). Pipe ([plugin 2]) .... pipe ([plugin n]). Pipe ($ .dest (<destination-name>)} -
$.task(<taskname> , [dependencies] , <body>);
Osservazioni
Riferimenti
Caricamento di tutti i plugin da Package.JSON
Supponendo che tu abbia una conoscenza di come installare gulp, lasciaci andare fino a richiedere tutte le dipendenze di gulp da package.json nella cartella principale dei tuoi progetti.
Nel caso in cui non si abbia ancora un file gulp, si prega di creare un file vuoto con il nome
gulpfile.js
Per prima cosa, abbiamo bisogno di un gulp. così:
var $ = require('gulp');
Successivamente, carichiamo tutti i nostri plugin, nel nostro file gulp, dal frammento di seguito
Nota
Leggi i commenti in tutti i frammenti che includeremo in questa lettura, forniscono più informazioni su ogni funzionalità
/*
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')();
NOTA
Attraverso tutti i molti esempi che avremo nell'articolo, noi alias
- deglutire come $ e
- gulp-load-plugins come $$
puramente per facilità di battitura.
Installazione di plugin per immagini reattive | Css Minification | Js minification
Il nostro obiettivo è quello di
- Rendi le tue immagini conformi alle larghezze e alla scala in modo appropriato, generando una batteria di immagini di larghezze diverse e per ridimensionarle
- Lascia il tuo javascript
- Riduci al minimo le risorse: JS / CSS / HTML, consentendo così di ospitare un codice più leggero di quello più leggero
- Guarda i file css / js / image per il cambiamento e ricostruisci le ottimizzazioni
- Sincronizzazione delle modifiche durante lo sviluppo, su un browser che serve il tuo sito.
Abbiamo bisogno di un numero di plugin, quindi installiamoli tutti. Si prega di eseguire tutti questi nella cartella principale del progetto.
Plugin per l'elaborazione delle immagini
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
Plugin ottimizzatore di asset
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
Anatomia di una funzione di sorso
[Function <name>] (glob) {
$.src(glob)
.pipe([plugin 1])
.pipe([plugin 2])
.
.
.
.pipe([plugin n])
.pipe( $.dest(<destination-name>)
}
Nota
pipe è un metodo che esegue lo streaming di tutti i file corrispondenti all'ingresso glob, ai nostri plug-in (minifyhtml in questo caso).
È semplice immaginarlo così:
$ .src è ciò che costruisce lo stream e pipe pipe fuori ogni singolo file che corrisponde al glob verso il basso per ogni plugin nella pipeline.Ogni plugin il file viene passato a, modifica il suo contenuto in memoria solo fino a $ .dest è stato raggiunto, che quindi aggiorna / crea file in streaming da $ .src
Dove ,
$ -> gulp
$$ -> gulp-load-plugins
Ottimizzazione e minimizzazione delle risorse
Quindi, prima di scrivere le funzioni di ottimizzazione, è necessario installare un paio di plug-in di memorizzazione nella cache.
bash $ npm install --save-dev gulp-cached
bash $ npm install --save-dev gulp-remember
Potresti chiederti perché due cache eh !. gulp-cache , passa solo il contenuto modificato o nuovo nella pipeline ad altri plugin. Quindi, dato che vogliamo che i file senza modifiche vengano utilizzati per concatenare in un singolo file per risorsa (css | js), abbiamo bisogno di gulp-remember oltre a gulp-cache
Per prima cosa usiamo gulp-cache per creare un elenco di file che sono stati modificati
In secondo luogo, abbiamo bisogno di gulp-ricordarsi di tenere traccia di tutti i file che sono passati attraverso quella lista in memoria.
Prima esecuzione: nessun file viene memorizzato nella cache, quindi gulp-cache li passerà tutti a gulp-remember
Esecuzioni successive: solo i file modificati o nuovi vengono reindirizzati da gulp-cache. Poiché il contenuto del file corrente è cambiato, gulp-remember aggiorna la sua cache.
Cool, scriviamo il nostro primo ottimizzatore
Style Optimizer
// 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'))
}
Nota
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> crea flussi di file corrispondenti al glob passato come src
$ .dest -> salva il file manipolato nel percorso specificato
Script Optimiser
// 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'))
}
Nota
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> crea flussi di file corrispondenti al glob passato come src
$ .dest -> salva il file manipolato nel percorso specificato
Generare immagini reattive
Passiamo ora all'elaborazione delle immagini. Quindi, lo scopo è avere una serie di dimensioni per ogni immagine che stai per servire.
Perché?
Bene, per capire perché abbiamo bisogno di una batteria di immagini con una gamma di larghezze, dobbiamo riflettere sul fatto che probabilmente ci sono milioni di dispositivi con risoluzioni diverse. Abbiamo bisogno di un'immagine da ridimensionare senza molti pixel. Allo stesso tempo, dobbiamo migliorare i tempi di caricamento della pagina, scaricando solo l'immagine, che si adatta alla larghezza in cui è contenuta, ed è anche con la dimensione più piccola possibile, per farlo. Ci sono blog accademici come quello scritto da Eric Portis, che mette in evidenza l'inefficacia delle sole domande dei media e funge da guida completa alla comprensione di concetti come srcset e dimensioni.
Puoi riferirti all'epica scrittura di Eric Portis qui
Ora, la nostra funzione, ha bisogno di prendere un glob e una larghezza come input, e fare la sua magia e spingere il file ogni corsa genera, verso una destinazione e minimizzare l'immagine responsiva.
Abbiamo installato due plug- in di compressione delle immagini nel nostro primo esempio
Dato che questi plugin NON iniziano con un "gulp-" prefissato, dobbiamo caricarli manualmente sul nostro gulpfile.
SO Richiediamoli manualmente, dopo la dichiarazione gulp-load-plugins nella parte superiore del nostro gulpfile.
così:
var compressJpg = require('imagemin-jpeg-recompress');
var pngquant = require('imagemin-pngquant');
Vale la pena notare che gulp-responsive viene fornito con il nitido processore di immagini, che è migliore di imagemagick di FAAAAR !. Sharp è ciò che viene utilizzato da gulp-responsive per ritagliare le immagini alle larghezze desiderate.
potresti dare un'occhiata a gulp-responsive-configuration-options, per un elenco completo di parametri di configurazione. Ho solo usato
- larghezza - per ritagliare le nostre immagini ad una larghezza w, passata come parametro
- rinomina - per aggiungere un suffisso al nome dell'immagine, in modo che rimanga univoco
nella mia funzione di configurazione di seguito. quindi la nostra funzione taglierà l'immagine alla larghezza passata come input, per tutte le immagini corrispondenti decifrate tramite l'input glob. quindi, ogni immagine viene compressa usando jpeg-recompress o pngquant e salvata all'interno di build / images.
Con questo in mente, la nostra funzione sarebbe così:
/*
@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));
}
Nota
$ -> gulp
$$ -> gulp-load-plugins
$ .src -> crea flussi di file corrispondenti al glob passato come src
$ .dest -> salva il file manipolato nel percorso specificato
Ulteriori riferimenti
HTML Minifier
*
*@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;
}));
}
Anatomia di un compito ingannevole
L'anatomia di una definizione di attività è così:
$.task(<taskname> , [dependencies] , <body>);
dipendenze, è una serie di compiti che devono finire prima del compito corrente che si sta definendo, corre. Più simile a forzare un'esecuzione sincrona invece della funzionalità Asincrona predefinita.
Aggiunta di attività Gulp
Quindi, ora abbiamo
- Una funzione definita Sopra per ottimizzare gli stili
- Una funzione definita Sopra per ottimizzare gli script
- Una funzione definita Sopra per ottimizzare l'HTML
- Una funzione per generare più immagini per immagine Sopra
Tutto ciò che dobbiamo fare ora è invocarli quando necessario.
Lascia che scriviamo i nostri compiti in base alla sintassi che abbiamo definito in precedenza
/*
* $.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();
});