Używanie Imagemin z Grunt

Katie Hempenius

Konfigurowanie wtyczki Imagemin Grunt

Ta usterka obejmuje już atrybuty grunt, grunt-cli oraz grunt-contrib-imagemin wtyczki. Aby dodać konfigurację Imagemin, musisz edytować gruntfile.js.

• Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
• 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 o tym, które pliki należy skompresować za pomocą Imagemin.

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

• Wzorzec pliku {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} spowoduje dopasowanie do wszystkich zdjęć JPEG i PNG w katalogu images/.

• Wczytaj zadanie Imagemin, dodając ten wiersz bezpośrednio przed 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 */ działaniem 'imagemin'. Ten wiersz powinien teraz wyglądać tak:

grunt.registerTask('default', ['imagemin']);

✔✔

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 służąca do określania poziomów jakości kompresji. Dodaliśmy już imagemin-pngquant do tego projektu w package.json aby użyć go do skompresowania plików PNG. Aby go używać, zadeklaruj wtyczkę i określ poziom jakości kompresji w Gruntfile.

• Zadeklaruj wtyczkę imagemin-pngquant, dodając ten wiersz na górze kodu gruntfile.js:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...

• Aby dodać ustawienia kompresji obrazów PNG, dodaj właściwość options do imagemin obiekt. Właściwość options powinna wyglądać tak:

grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

Ten kod informuje Imagemin, że ma skompresować pliki PNG za pomocą wtyczki Pngquant. Pole quality używa zakresu wartości min i max do określenia poziom kompresji – 0 – najniższy, a 1 – najwyższy. Aby wymusić na wszystkich obrazach należy skompresować z jakością 50%, przekazać 0.5 jako wartość minimalną i maksymalną.

✔✔

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 plikami JPEG? Projekt zawiera też obrazy JPEG, więc musisz określić, w jaki sposób również są skompresowane.

Dostosowywanie konfiguracji Imagemin (ciąg dalszy)

Skorzystaj z zainstalowanej już wtyczki imagemin-mozjpeg, aby: kompresować obrazy JPEG.

• Zadeklaruj wtyczkę imagemin-mozjpeg, umieszczając ten wiersz na początku 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: {

✔✔

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

Bieganie, Grunt sprawdź wyniki za pomocą Lighthouse

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

grunt

Gdy Grunt zakończy pracę, w konsoli powinien pojawić się taki komunikat:

Minified 6 images (saved 667 kB - 66.5%)

Hurra! Te wyniki są znacznie lepsze.

Warto też użyć narzędzia Lighthouse, aby sprawdzić zmiany podjętych działań. „Efektywnie koduj obrazy” w Lighthouse Audyt wydajności pozwoli czy pliki JPEG na stronie są optymalnie kompresowane.

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
• Przeprowadź audyt wydajności w Lighthouse (Lighthouse > Opcje > Wydajność) na wersji aktywnej i sprawdź, czy opcja „Skutecznie zakoduj obrazy” kontrola została zaliczona.

Gotowe! Udało Ci się użyć programu Imagemin, aby optymalnie skompresować obrazy na stronie.