Utilizzo di Imagemin con Grunt

Katie Hempenius
Katie Hempenius
X

Configurazione del plug-in Imagemin Grunt

Questo Glitch contiene già grunt, grunt-cli e il plug-in grunt-contrib-imagemin. Per aggiungere la configurazione per Imagemin, devi modificare il tuo file gruntfile.js.

  • Fai clic su Remix per modificare per rendere il progetto modificabile.
  • 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 verrà generato dinamicamente abbinando i nomi dei file al pattern di file specificato.

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

  • Carica l'attività Imagemin aggiungendo questa riga immediatamente prima di grunt.registerTask(...):
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • Infine, aggiungi Imagemin come attività Grunt predefinita sostituendo il commento /* list plugins here */ con 'imagemin'. La riga dovrebbe avere il seguente aspetto:
grunt.registerTask('default', ['imagemin']);

✔︎ 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']);

Personalizza la configurazione di Imagemin

imagemin-pngquant è un plug-in per specificare i livelli di qualità della compressione. Abbiamo già aggiunto imagemin-pngquant a questo progetto nel file package.json per consentirti di utilizzarlo per comprimere i file PNG. Per utilizzarlo, dichiara il plug-in e specifica un livello di qualità di compressione nel tuo Gruntfile.

  • Dichiara il plug-in imagemin-pngquant aggiungendo questa riga nella parte superiore di gruntfile.js:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • Aggiungi impostazioni per la compressione delle immagini PNG aggiungendo una proprietà options all'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 PNG utilizzando il plug-in Pngquant. 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 la compressione di tutte le immagini con una qualità al 50%, trasmetti 0.5 come valore minimo e massimo.

✔︎ 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 i file JPEG? Poiché il progetto contiene anche immagini JPEG, devi specificare anche come vengono compresse.

Personalizzazione della configurazione di Imagemin (continua)

Usa il plug-in imagemin-mozjpeg, che è già stato installato, 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');
  • Quindi, aggiungi mozjpeg({quality: 50}) all'array nell'oggetto options. L'array dovrebbe avere il seguente aspetto:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔︎ 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']);

Esegui Grunt e verifica i risultati con Lighthouse

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

Al termine, nella console dovresti vedere un messaggio simile al seguente:

Minified 6 images (saved 667 kB - 66.5%)

Ottimo. Questi risultati sono molto migliori.

Infine, è consigliabile utilizzare Lighthouse per verificare le modifiche apportate. Il controllo delle prestazioni "Codifica le immagini in modo efficiente" di Lighthouse ti consente di sapere se le immagini JPEG sulla pagina sono compresse in modo ottimale.

  • Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero schermo intero.
  • Esegui il controllo delle prestazioni di Lighthouse (Lighthouse > Opzioni > Prestazioni) sulla versione dal vivo di Glitch e verifica che il controllo "Codifica in modo efficiente delle immagini" sia stato superato.

Superare il controllo "Codifica le immagini in modo efficiente" in Lighthouse

Success! Hai utilizzato Imagemin per comprimere in modo ottimale le immagini sulla pagina.