Używanie Imagemin z Grunt

Katie Hempenius
Katie Hempenius
X

Skonfiguruj wtyczkę Imagemin Grunt

Ten błąd zawiera już grunt, grunt-cli i wtyczkę grunt-contrib-imagemin. Aby dodać konfigurację Imagemin, musisz edytować plik gruntfile.js.

  • Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
  • W gruntfile.js zastąp komentarz //Add configuration here tym blokiem kodu:
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

Ten blok kodu informuje Grunt, które pliki należy skompresować za pomocą Imagemin.

  • dynamic oznacza, że lista plików do skompresowania będzie dynamicznie generowana przez dopasowanie nazw plików do określonego wzorca.

  • Wzorzec pliku {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} pasuje do wszystkich obrazów JPEG i PNG w katalogu images/.

  • Wczytaj zadanie Imagemin, dodając ten wiersz bezpośrednio przed parametrem grunt.registerTask(...):
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • Na koniec dodaj Imagemin jako domyślne zadanie Grunt, zastępując komentarz /* list plugins here */ wartością 'imagemin'. Ten wiersz powinien teraz wyglądać tak:
grunt.registerTask('default', ['imagemin']);

✔✔ Zameldowanie

Pełny plik gruntfile.js powinien teraz wyglądać tak:

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']);

Dostosuj konfigurację Imagemin

imagemin-pngquant to wtyczka do określania poziomów jakości kompresji. Dodaliśmy już projekt imagemin-pngquant do tego projektu w pliku package.json, dzięki czemu możesz go używać do skompresowania plików PNG. Aby z niej korzystać, zadeklaruj wtyczkę i określ poziom jakości kompresji w pliku Gruntfile.

  • Zadeklaruj wtyczkę imagemin-pngquant, dodając ten wiersz na górze strony gruntfile.js:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • Dodaj ustawienia kompresowania obrazów PNG, dodając właściwość options do obiektu imagemin. Właściwość options powinna wyglądać tak:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

Ten kod umożliwia usłudze Imagemin kompresowanie plików PNG za pomocą wtyczki Pngquant. Pole quality używa zakresu wartości min i max do określania poziomu kompresji – 0 to najniższa wartość, a 1 – najwyższa. Aby wymusić kompresowanie wszystkich obrazów z wysoką jakością 50%, przekaż 0.5 jako wartość minimalną i maksymalną.

✔✔ Zameldowanie

Twój plik gruntfile.js powinien teraz wyglądać tak:

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']);

A co z JPEG? Projekt zawiera też obrazy JPEG, więc musisz też określić sposób, w jaki są one kompresowane.

Dostosowywanie konfiguracji Imagemin (ciąg dalszy)

Aby kompresować obrazy JPEG, użyj wtyczki imagemin-mozjpeg, która została już zainstalowana.

  • Zadeklaruj wtyczkę imagemin-mozjpeg, umieszczając ten wiersz u góry strony gruntfile.js.
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • Następnie dodaj mozjpeg({quality: 50}) do tablicy w obiekcie options. Ta tablica powinna teraz wyglądać tak:
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔✔ Zameldowanie

Twój plik gruntfile.js powinien teraz wyglądać tak:

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']);

Uruchamianie Grunt i weryfikowanie wyników za pomocą Lighthouse

  1. Kliknij przycisk Narzędzia.
  2. Następnie kliknij przycisk Konsola.
  3. Uruchom Grunt, wpisując w konsoli następujące polecenie:
grunt

Po zakończeniu pracy Grunt w konsoli powinien pojawić się komunikat podobny do tego:

Minified 6 images (saved 667 kB - 66.5%)

Świetnie. Te wyniki są dużo lepsze.

Warto też użyć narzędzia Lighthouse, aby sprawdzić wprowadzone zmiany. Podczas kontroli wydajności „Efektywnie koduj obrazy” w Lighthouse możesz sprawdzić, czy obrazy JPEG na Twojej stronie są optymalnie skompresowane.

  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran pełny ekran.
  • Przeprowadź kontrolę wydajności w Lighthouse (Lighthouse > Opcje > Wydajność) w działającej wersji Glitcha i sprawdź, czy kontrola „Skutecznie koduj obrazy” została zaliczona.

Audyt „Efektywnie koduj obrazy” w Lighthouse

Success! Obrazy na stronie zostały optymalnie skompresowane za pomocą programu Imagemin.