Imagemin Grunt-Plug-in einrichten
Diese Glitch enthält bereits grunt
, grunt-cli
und die grunt-contrib-imagemin
. Um die Konfiguration für Imagemin hinzuzufügen, müssen Sie die
gruntfile.js
-Datei.
- Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
- Ersetzen Sie in „
gruntfile.js
“ den Kommentar „//Add configuration here
“ mit diesem Codeblock:
imagemin: {
dynamic: {
files: [{
cwd: 'images/',
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
Dieser Codeblock teilt Grunt mit, welche Dateien mit Imagemin komprimiert werden sollen.
dynamic
gibt an, dass die Liste der zu komprimierenden Dateien dynamisch ist. generiert werden, indem die Dateinamen mit dem angegebenen Dateimuster abgeglichen werden.Das Dateimuster
{cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']}
stimmt mit allen JPEG- und PNG-Bildern im Verzeichnisimages/
überein.
- Laden Sie die Imagemin-Aufgabe, indem Sie diese Zeile direkt vor
grunt.registerTask(...)
:
grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', [/* list plugins here */]);
- Füge zum Schluss Imagemin als Standard-Grunt-Aufgabe hinzu, indem du den
/* list plugins here */
-Kommentar durch'imagemin'
ersetzt. Diese Zeile sollte jetzt so aussehen:
grunt.registerTask('default', ['imagemin']);
✔🎬 Check-in
Die vollständige gruntfile.js
-Datei sollte jetzt so aussehen:
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']);
Imagemin-Konfiguration anpassen
imagemin-pngquant
ist ein Plug-in zum Angeben der Komprimierungsqualität.
Wir haben diesem Projekt bereits imagemin-pngquant
in der package.json
hinzugefügt
, damit Sie Ihre PNGs komprimieren können. Deklarieren Sie das Plug-in, um es zu verwenden
und geben Sie in Ihrer Gruntfile
eine Komprimierungsqualität an.
- Deklarieren Sie das Plug-in
imagemin-pngquant
, indem Sie diese Zeile oben imgruntfile.js
:
const pngquant = require('imagemin-pngquant'); const grunt = require('grunt') grunt.initConfig({ ...
- Fügen Sie Einstellungen für das Komprimieren von PNG-Bildern hinzu, indem Sie die Eigenschaft
options
zurimagemin
-Objekt. Dieseoptions
-Property sollte so aussehen:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), ] }, dynamic: { ...
Dieser Code weist Imagemin an, PNGs mithilfe des Pngquant-Plug-ins zu komprimieren. Die
Das Feld quality
verwendet die Wertebereiche min
und max
, um die
Komprimierungsstufe: 0 ist die niedrigste und 1 die höchste. Um alle Bilder
bei 50% Qualität komprimiert werden, übergeben Sie 0.5
als Mindest- und Höchstwert.
✔🎬 Check-in
Die Datei gruntfile.js
sollte jetzt so aussehen:
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']);
Aber was ist mit JPEGs? Das Projekt verfügt auch über JPEG-Bilder, also sollten Sie angeben, wie werden sie ebenfalls komprimiert.
Imagemin-Konfiguration anpassen (Fortsetzung)
Verwenden Sie das Plug-in imagemin-mozjpeg
, das bereits für Sie installiert wurde, um
JPEG-Bilder zu komprimieren.
- Deklarieren Sie das Plug-in
imagemin-mozjpeg
, indem Sie diese Zeile am Anfang dergruntfile.js
.
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- Fügen Sie als Nächstes
mozjpeg({quality: 50})
zum Array imoptions
-Objekt hinzu. Dieses Array sollte jetzt so aussehen:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), mozjpeg({quality: 50}) ] }, dynamic: {
✔🎬 Check-in
Die Datei gruntfile.js
sollte jetzt so aussehen:
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']);
Run Grunt & Ergebnisse mit Lighthouse überprüfen
- Klicken Sie auf die Schaltfläche Tools.
- Klicken Sie dann auf die Schaltfläche Console.
- Führen Sie Grunt aus, indem Sie den folgenden Befehl in die Konsole eingeben:
grunt
Wenn Grunt abgeschlossen ist, sollte in der Konsole eine Meldung wie die folgende angezeigt werden:
Minified 6 images (saved 667 kB - 66.5%)
Super! Diese Ergebnisse sind viel besser.
Außerdem empfiehlt es sich, mit Lighthouse die Änderungen zu überprüfen, gemacht. Das Tool „Bilder effizient codieren“ von Lighthouse der Leistungsanalyse können Sie ob die JPEG-Bilder auf Ihrer Seite optimal komprimiert sind.
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann
Vollbild
- Führen Sie die Lighthouse-Leistungsprüfung durch (Lighthouse > Optionen > Leistung) für die Live-Version Ihrer Glitch-Funktion Bilder“ bestanden.
Fertig! Sie haben Imagemin verwendet, um die Bilder auf Ihrer Seite optimal zu komprimieren.