Utilizzo di Imagemin con Grunt

Katie Hempenius

Configura il plug-in Imagemin Grunt

Questo glitch contiene già grunt, grunt-cli e grunt-contrib-imagemin . Per aggiungere la configurazione per Imagemin, devi modificare gruntfile.js.

• Fai clic su Remixa per modificare per rendere modificabile il progetto.
• In gruntfile.js, sostituisci il commento //Add configuration here con questo blocco di codice:

imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

Questo blocco di codice indica a Grunt quali file devono essere compressi con Imagemin.

• dynamic indica che l'elenco di file da comprimere sarà dinamica generati dalla corrispondenza dei nomi file con il pattern di file specificato.

• Il pattern di file {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} corrisponderà a tutte le immagini JPEG e PNG nella directory images/.

• Carica l'attività Imagemin aggiungendo questa riga immediatamente prima grunt.registerTask(...):

grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);

• Infine, aggiungi Imagemin come attività predefinita di Grunt sostituendo il commento /* list plugins here */ con 'imagemin'. La riga dovrebbe avere il seguente aspetto:

grunt.registerTask('default', ['imagemin']);

✔✔ Fai il check-in

Il file gruntfile.js completo ora dovrebbe avere il seguente aspetto:

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

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

• Dichiara il plug-in imagemin-pngquant aggiungendo questa riga all'inizio della tua gruntfile.js:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...

• Aggiungi le impostazioni per comprimere le immagini PNG aggiungendo una proprietà options alla sezione Oggetto imagemin. La proprietà options dovrebbe avere il seguente aspetto:

grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

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 gruntfile.js ora dovrebbe avere il seguente aspetto:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

E per quanto riguarda i JPEG? Il progetto contiene anche immagini JPEG, quindi devi specificare come vengono compressi.

Personalizza la configurazione di Imagemin (continua)

Utilizza il plug-in imagemin-mozjpeg, che è già stato installato, per per comprimere le immagini JPEG.

• Dichiara il plug-in imagemin-mozjpeg posizionando questa riga nella parte superiore del tuo gruntfile.js.

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

• Successivamente, aggiungi mozjpeg({quality: 50}) all'array nell'oggetto options. L'array ora dovrebbe avere il seguente aspetto:

grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔✔ Fai il check-in

Il file gruntfile.js ora dovrebbe avere il seguente aspetto:

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Corri grugniti verifica i risultati con Lighthouse

1. Fai clic sul pulsante Strumenti.
2. Quindi, fai clic sul pulsante Console.
3. Esegui Grunt digitando il seguente comando nella console:

grunt

Al termine di Grunt, nella console dovrebbe essere visualizzato un messaggio simile al seguente:

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 del rendimento ti consente per sapere se le immagini JPEG sulla tua pagina sono 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.