Configura il plug-in Imagemin Gulp
Questo Glitch contiene già il plug-in gulp
, gulp-cli
e gulp-imagemin
.
Per aggiungere la configurazione per Imagemin, devi modificare il file gulpfile.js
.
- Fai clic su Remixa per modificare per rendere modificabile il progetto.
- Innanzitutto, inizializza il plug-in
gulp-imagemin
aggiungendo questo codice nella parte superiore dellagulpfile.js
:
const imagemin = require('gulp-imagemin');
- Successivamente, sostituisci il commento
//Add tasks here
ingulpfile.js
con questo codice blocco:
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('images/'))
Questo codice aggiunge un'attività Gulp che utilizza Imagemin per comprimere le immagini nel
Directory images/
. Le immagini originali vengono sovrascritte e salvate nello stesso
Directory images/
.
✔✔ Fai il check-in
Il file gulpfile.js
ora dovrebbe avere il seguente aspetto:
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('images/'))
});
Ora hai un elemento gulpfile.js
che può essere utilizzato per comprimere le immagini.
Corri Gulp
- Fai clic sul pulsante Strumenti.
- Quindi, fai clic sul pulsante Console.
- Esegui Gulp per comprimere le immagini digitando il seguente comando Console:
gulp
Al termine di Gulp, dovresti visualizzare un messaggio simile al seguente nel terminale:
gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)
Un miglioramento del 15% delle dimensioni del file è un buon inizio; tuttavia, altri miglioramenti possono utilizzando diverse impostazioni di compressione.
Personalizzare la configurazione di Imagemin
imagemin-pngquant
è un plug-in che consente di specificare i livelli di qualità della compressione.
Abbiamo già aggiunto imagemin-pngquant
a questo progetto in package.json
in modo che tu possa utilizzarlo per comprimere i file PNG. Per utilizzarlo, dichiara il plug-in
e specificare un livello di qualità di compressione
nel file gulpfile.
- Dichiara il plug-in
imagemin-pngquant
aggiungendo questa riga all'inizio della tuagulpfile.js
:
const pngquant = require('imagemin-pngquant');
- Aggiungi il plug-in
imagemin-pngquant
(e le relative impostazioni) trasmettendo quanto segue inImageminPlugin()
:
[pngquant({quality: [0.5, 0.5]})]
Questo codice indica a Imagemin di comprimere i file PNG utilizzando il plug-in Pngquant. La
Il campo quality
utilizza un intervallo di valori min
e max
per determinare il
livello di compressione (0 è il più basso e 1 è il più alto). Per forzare l'utilizzo di tutte le immagini in
deve essere compresso al 50% di qualità, passa 0.5
come valore minimo e massimo.
✔✔ Fai il check-in
Il file gulpfile.js
ora dovrebbe avere il seguente aspetto:
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin([
pngquant({quality: [0.5, 0.5]})
]))
.pipe(gulp.dest('images/'))
});
E i file JPG? Il progetto contiene anche immagini JPG, questi devono essere è compresso.
Personalizza la configurazione di Imagemin (continua)
Utilizza il plug-in imagemin-mozjpeg
, che è già installato, per comprimere
Immagini JPG.
- Dichiara il plug-in
imagemin-mozjpeg
posizionando questa riga nella parte superiore digulpfile.js
.
const mozjpeg = require('imagemin-mozjpeg');
- Quindi, aggiungi
mozjpeg({quality: 50})
all'array passato aImageminPlugin()
:
[
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]
✔✔ Fai il check-in
Il file gulpfile.js
ora dovrebbe avere il seguente aspetto:
const mozjpeg = require('imagemin-mozjpeg')
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin([
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]))
.pipe(gulp.dest('images/'))
});
Esegui di nuovo Gulp & verifica i risultati con Lighthouse
- Esegui di nuovo Gulp:
gulp
Al termine di Gulp, nel terminale dovrebbe essere visualizzato un messaggio simile al seguente:
gulp-imagemin: Minified 6 images (saved 667 kB—66.5%)
Evviva! Questi risultati sono molto migliori.
Infine, ti consigliamo di usare Lighthouse per verificare le modifiche che hai appena apportato in cui viene eseguito il deployment.
"Codifica efficiente delle immagini" di Lighthouse il controllo delle prestazioni può indicare le immagini JPEG sulla pagina vengono compresse in modo ottimale.
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi Schermo intero .
- Esegui il controllo delle prestazioni di Lighthouse (Lighthouse > Opzioni > Prestazioni) su la versione live del tuo Glitch e verifica che il pulsante "Codifica in modo efficiente immagini" il controllo è stato superato.
Operazione riuscita. Hai utilizzato Imagemin per comprimere in modo ottimale le immagini della tua pagina.