Imagemin Grunt-Plug-in einrichten
Dieser Glitch enthält bereits grunt
, grunt-cli
und das grunt-contrib-imagemin
-Plug-in. Um die Konfiguration für Imagemin hinzuzufügen, müssen Sie die Datei gruntfile.js
bearbeiten.
- Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
- Ersetzen Sie in
gruntfile.js
den Kommentar//Add configuration here
durch diesen 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 generiert wird, 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(...)
einfügen:
grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', [/* list plugins here */]);
- Fügen Sie abschließend Imagemin als Standard-Grint-Aufgabe hinzu. Ersetzen Sie dazu den Kommentar
/* list plugins here */
durch'imagemin'
. Diese Zeile sollte jetzt wie folgt aussehen:
grunt.registerTask('default', ['imagemin']);
✔⁂ Einchecken
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 Festlegen von Komprimierungsqualitätsstufen.
Wir haben diesem Projekt bereits imagemin-pngquant
in der Datei package.json
hinzugefügt, damit du sie zum Komprimieren deiner PNGs verwenden kannst. Um es zu verwenden, musst du das Plug-in deklarieren und eine Komprimierungsqualitätsstufe in deiner Gruntfile angeben.
- Deklarieren Sie das Plug-in
imagemin-pngquant
, indem Sie diese Zeile oben ingruntfile.js
einfügen:
const pngquant = require('imagemin-pngquant'); const grunt = require('grunt') grunt.initConfig({ ...
- Du kannst Einstellungen für die Komprimierung von PNG-Bildern festlegen, indem du dem Objekt
imagemin
einoptions
-Attribut hinzufügst. Dasoptions
-Attribut sollte so aussehen:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), ] }, dynamic: { ...
Dieser Code weist Imagemin an, PNGs mit dem Pngquant-Plug-in zu komprimieren. Im Feld quality
wird der Wertebereich min
und max
verwendet, um das Komprimierungsniveau zu bestimmen. 0 ist die niedrigste und 1 die höchste Stufe. Wenn Sie erzwingen möchten, dass alle Bilder bei 50% komprimiert werden, geben Sie 0.5
als Mindest- und Höchstwert an.
✔⁂ Einchecken
Ihre gruntfile.js
-Datei 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, daher sollten Sie auch angeben, wie diese komprimiert werden.
Imagemin-Konfiguration anpassen (Fortsetzung)
Verwenden Sie das bereits installierte imagemin-mozjpeg
-Plug-in, um JPEG-Bilder zu komprimieren.
- Deklarieren Sie das Plug-in
imagemin-mozjpeg
, indem Sie diese Zeile an den Anfang Ihresgruntfile.js
setzen.
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- Als Nächstes fügen Sie dem Array im
options
-Objektmozjpeg({quality: 50})
hinzu. Das Array sollte jetzt so aussehen:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), mozjpeg({quality: 50}) ] }, dynamic: {
✔⁂ Einchecken
Ihre gruntfile.js
-Datei 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']);
Grunt ausführen und 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%)
Juhu! Diese Ergebnisse sind viel besser.
Außerdem ist es eine gute Idee, die gerade vorgenommenen Änderungen mit Lighthouse zu überprüfen. Mit der Leistungsprüfung „Bilder effizient codieren“ von Lighthouse erfahren Sie, ob die JPEG-Bilder auf Ihrer Seite optimal komprimiert sind.
- Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.
- Führen Sie die Lighthouse-Leistungsprüfung (Lighthouse > Optionen > Leistung) für die Live-Version von Glitch aus und prüfen Sie, ob die Prüfung „Bilder effizient codieren“ bestanden wurde.
Fertig! Sie haben Imagemin verwendet, um die Bilder auf Ihrer Seite optimal zu komprimieren.