Imagemin Gulp-Plug-in einrichten
Dieser Glitch enthält bereits gulp
, gulp-cli
und das gulp-imagemin
-Plug-in.
Um die Konfiguration für Imagemin hinzuzufügen, müssen Sie die Datei gulpfile.js
bearbeiten.
- Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
- Initialisieren Sie zuerst das Plug-in
gulp-imagemin
. Fügen Sie dazu den folgenden Code am Anfang vongulpfile.js
ein:
const imagemin = require('gulp-imagemin');
- Ersetzen Sie als Nächstes den Kommentar
//Add tasks here
ingulpfile.js
durch diesen Codeblock:
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('images/'))
Mit diesem Code wird eine Gulp-Aufgabe hinzugefügt, die die Bilder im Verzeichnis images/
mithilfe von Imagemin komprimiert. Die ursprünglichen Images werden überschrieben und im selben images/
-Verzeichnis gespeichert.
✔⁂ Einchecken
Ihre gulpfile.js
-Datei sollte jetzt so aussehen:
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin())
.pipe(gulp.dest('images/'))
});
Sie haben jetzt eine gulpfile.js
, mit der Bilder komprimiert werden können.
Lauf-Galp
- Klicken Sie auf die Schaltfläche Tools.
- Klicken Sie dann auf die Schaltfläche Console.
- Führen Sie Gulp aus, um Ihre Images zu komprimieren. Geben Sie dazu den folgenden Befehl in die Konsole ein:
gulp
Wenn Gulp abgeschlossen ist, sollte im Terminal eine Meldung wie die folgende angezeigt werden:
gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)
Eine Verbesserung der Dateigröße um 15% ist ein guter Anfang. Mit anderen Komprimierungseinstellungen sind jedoch weitere Verbesserungen möglich.
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. Deklarieren Sie das Plug-in und geben Sie in der Gulpfile-Datei eine Komprimierungsqualität an, um das Plug-in zu verwenden.
- Deklarieren Sie das Plug-in
imagemin-pngquant
, indem Sie diese Zeile oben ingulpfile.js
einfügen:
const pngquant = require('imagemin-pngquant');
- Fügen Sie das
imagemin-pngquant
-Plug-in und seine Einstellungen hinzu. Übergeben Sie dazu das folgende Array anImageminPlugin()
:
[pngquant({quality: [0.5, 0.5]})]
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 gulpfile.js
-Datei sollte jetzt so aussehen:
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin([
pngquant({quality: [0.5, 0.5]})
]))
.pipe(gulp.dest('images/'))
});
Aber was ist mit JPG-Dateien? Das Projekt hat auch JPG-Bilder, die ebenfalls komprimiert werden müssen.
Imagemin-Konfiguration anpassen (Fortsetzung)
Verwenden Sie das bereits installierte imagemin-mozjpeg
-Plug-in, um JPG-Bilder zu komprimieren.
- Deklarieren Sie das Plug-in
imagemin-mozjpeg
, indem Sie diese Zeile an den Anfang Ihrergulpfile.js
setzen.
const mozjpeg = require('imagemin-mozjpeg');
- Als Nächstes fügen Sie
mozjpeg({quality: 50})
dem Array hinzu, das anImageminPlugin()
übergeben wird:
[
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]
✔⁂ Einchecken
Ihre gulpfile.js
-Datei sollte jetzt so aussehen:
const mozjpeg = require('imagemin-mozjpeg')
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');
gulp.task('default', () => {
gulp.src('images/*')
.pipe(imagemin([
pngquant({quality: [0.5, 0.5]}),
mozjpeg({quality: 50})
]))
.pipe(gulp.dest('images/'))
});
Gulp noch einmal ausführen und Ergebnisse mit Lighthouse überprüfen
- Gulp noch einmal ausführen:
gulp
Wenn Gulp abgeschlossen ist, sollte im Terminal eine Meldung wie die folgende angezeigt werden:
gulp-imagemin: 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.