Menyiapkan plugin Grunt Imagemin
Glitch ini sudah berisi grunt
, grunt-cli
, dan plugin
grunt-contrib-imagemin
. Guna menambahkan konfigurasi untuk Imagemin, Anda harus mengedit
file gruntfile.js
.
- Klik Remix untuk Mengedit agar project dapat diedit.
- Di
gruntfile.js
, ganti komentar//Add configuration here
dengan blok kode ini:
imagemin: {
dynamic: {
files: [{
cwd: 'images/',
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
Blok kode ini memberi tahu Grunt file mana yang harus dikompresi dengan Imagemin.
dynamic
menunjukkan bahwa daftar file yang akan dikompresi akan dihasilkan secara dinamis dengan mencocokkan nama file dengan pola file yang ditentukan.Pola file
{cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']}
akan cocok dengan semua gambar JPEG dan PNG di direktoriimages/
.
- Muat tugas Imagemin dengan menambahkan baris ini tepat sebelum
grunt.registerTask(...)
:
grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', [/* list plugins here */]);
- Terakhir, tambahkan Imagemin sebagai tugas Grunt default dengan mengganti komentar
/* list plugins here */
dengan'imagemin'
. Sekarang baris tersebut akan terlihat seperti ini:
grunt.registerTask('default', ['imagemin']);
✔︎ Check in
File gruntfile.js
lengkap sekarang akan terlihat seperti ini:
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']);
Menyesuaikan Konfigurasi Imagemin
imagemin-pngquant
adalah plugin untuk menentukan tingkat kualitas kompresi.
Kami telah menambahkan imagemin-pngquant
ke project ini dalam file package.json
sehingga Anda dapat menggunakannya untuk mengompresi PNG. Untuk menggunakannya, deklarasikan plugin
dan tentukan tingkat kualitas kompresi di Gruntfile Anda.
- Deklarasikan plugin
imagemin-pngquant
dengan menambahkan baris ini ke bagian atasgruntfile.js
Anda:
const pngquant = require('imagemin-pngquant'); const grunt = require('grunt') grunt.initConfig({ ...
- Tambahkan setelan untuk mengompresi gambar PNG dengan menambahkan properti
options
ke objekimagemin
. Propertioptions
tersebut akan terlihat seperti ini:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), ] }, dynamic: { ...
Kode ini memberi tahu Imagemin untuk mengompresi PNG menggunakan plugin Pngquant. Kolom
quality
menggunakan rentang nilai min
dan max
untuk menentukan
tingkat kompresi—0 adalah yang terendah dan 1 adalah yang tertinggi. Untuk memaksa semua gambar
dikompresi pada kualitas 50%, teruskan 0.5
sebagai nilai minimum dan maksimum.
✔︎ Check in
File gruntfile.js
Anda sekarang akan terlihat seperti ini:
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']);
Namun, bagaimana dengan JPEG? Project ini juga memiliki gambar JPEG, jadi Anda juga harus menentukan cara kompresi gambar tersebut.
Menyesuaikan konfigurasi Imagemin (lanjutan)
Gunakan plugin imagemin-mozjpeg
, yang telah diinstal untuk Anda, untuk
mengompresi gambar JPEG.
- Deklarasikan plugin
imagemin-mozjpeg
dengan menempatkan baris ini di bagian atasgruntfile.js
.
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- Selanjutnya, tambahkan
mozjpeg({quality: 50})
ke array di objekoptions
. Array itu sekarang akan terlihat seperti ini:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), mozjpeg({quality: 50}) ] }, dynamic: {
✔︎ Check in
File gruntfile.js
Anda sekarang akan terlihat seperti ini:
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']);
Jalankan Grunt & verifikasi hasilnya dengan Lighthouse
- Klik tombol Tools.
- Lalu klik tombol Konsol.
- Jalankan Grunt dengan mengetikkan perintah berikut ke dalam konsol:
grunt
Setelah Grunt selesai, Anda akan melihat pesan seperti ini di konsol:
Minified 6 images (saved 667 kB - 66.5%)
Hore! Hasil ini jauh lebih baik.
Terakhir, sebaiknya gunakan Lighthouse untuk memverifikasi perubahan yang baru saja Anda buat. Audit performa "Efisien kode gambar" Lighthouse akan memungkinkan Anda mengetahui apakah gambar JPEG di halaman Anda dikompresi secara optimal.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .
- Jalankan audit performa Lighthouse (Lighthouse > Opsi > Performa) pada Glitch versi aktif dan pastikan bahwa audit "Enkode gambar yang efisien" telah lulus.
Berhasil! Anda telah menggunakan Imagemin untuk mengompresi gambar di halaman Anda secara optimal.