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 directoryimages/
.
- 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 digruntfile.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'oggettoimagemin
. 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 tuogruntfile.js
.
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- Quindi, aggiungi
mozjpeg({quality: 50})
all'array nell'oggettooptions
. 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
- Fai clic sul pulsante Strumenti.
- Quindi, fai clic sul pulsante Console.
- 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 .
- 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.
Success! Hai utilizzato Imagemin per comprimere in modo ottimale le immagini sulla pagina.