Imagemin mit Grunt verwenden

Katie Hempenius
Katie Hempenius
X

Imagemin Grunt-Plug-in einrichten

Diese Störung 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 Verzeichnis images/ ü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 im gruntfile.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 zur imagemin-Objekt. Diese options-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 auch 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 der gruntfile.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 im options-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

  1. Klicken Sie auf die Schaltfläche Tools.
  2. Klicken Sie dann auf die Schaltfläche Console.
  3. 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.

Schließlich ist es eine gute Idee, 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 Vollbild
  • Führen Sie die Lighthouse-Leistungsprüfung durch (Lighthouse > Optionen > Leistung) für die Live-Version der Glitch-Funktion Bilder“ bestanden.

Übergabe von „Bilder effizient codieren“ Prüfung in Lighthouse

Fertig! Sie haben Imagemin verwendet, um die Bilder auf Ihrer Seite optimal zu komprimieren.