Utilizzo di Imagemin con Gulp

Katie Hempenius

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 della gulpfile.js:

const imagemin = require('gulp-imagemin');

• Successivamente, sostituisci il commento //Add tasks here in gulpfile.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

1. Fai clic sul pulsante Strumenti.
2. Quindi, fai clic sul pulsante Console.
3. 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 tua gulpfile.js:

const pngquant = require('imagemin-pngquant');

• Aggiungi il plug-in imagemin-pngquant (e le relative impostazioni) trasmettendo quanto segue in ImageminPlugin():

[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 di gulpfile.js.

const mozjpeg = require('imagemin-mozjpeg');

• Quindi, aggiungi mozjpeg({quality: 50}) all'array passato a ImageminPlugin():

[
  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.