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 kataloguimages/
.
- 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 stronygruntfile.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 obiektuimagemin
. 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 stronygruntfile.js
.
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- Następnie dodaj
mozjpeg({quality: 50})
do tablicy w obiekcieoptions
. 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
- Kliknij przycisk Narzędzia.
- Następnie kliknij przycisk Konsola.
- 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 .
- 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.
Success! Obrazy na stronie zostały optymalnie skompresowane za pomocą programu Imagemin.