Imagemin Grunt eklentisini kurun
Bu Glitch zaten grunt
, grunt-cli
ve grunt-contrib-imagemin
eklentisini içeriyor. Imagemin yapılandırmasını eklemek için gruntfile.js
dosyanızı düzenlemeniz gerekir.
- Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
gruntfile.js
metninde//Add configuration here
yorumunu şu kod bloğuyla değiştirin:
imagemin: {
dynamic: {
files: [{
cwd: 'images/',
expand: true,
src: ['**/*.{png,jpg}'],
}]
}
}
Bu kod bloğu, Grunt'a hangi dosyaların Imagemin ile sıkıştırılması gerektiğini söyler.
dynamic
, sıkıştırılacak dosya listesinin, dosya adları belirtilen dosya kalıbıyla eşleştirilerek dinamik olarak oluşturulacağını belirtir.{cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']}
dosya kalıbı,images/
dizinindeki tüm JPEG ve PNG resimleriyle eşleşecektir.
grunt.registerTask(...)
öğesinin hemen öncesine bu satırı ekleyerek Imagemin görevini yükleyin:
grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('default', [/* list plugins here */]);
- Son olarak,
/* list plugins here */
yorumunu'imagemin'
ile değiştirerek Imagemin'i varsayılan Grunt görevi olarak ekleyin. Bu satır artık şu şekilde görünmelidir:
grunt.registerTask('default', ['imagemin']);
✔️ Check-in
gruntfile.js
dosyasının tamamı artık aşağıdaki gibi görünmelidir:
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 Yapılandırmanızı özelleştirin
imagemin-pngquant
, sıkıştırma kalitesi düzeylerini belirtmek için kullanılan bir eklentidir.
Bu projeye imagemin-pngquant
dosyasını, PNG'lerinizi sıkıştırmak için kullanabilmeniz
için package.json
dosyasına zaten ekledik. Kullanmak için eklentiyi bildirin ve Gruntfile dosyanızda bir sıkıştırma kalitesi seviyesi belirtin.
gruntfile.js
öğesinin üst kısmına şu satırı ekleyerekimagemin-pngquant
eklentisini bildirin:
const pngquant = require('imagemin-pngquant'); const grunt = require('grunt') grunt.initConfig({ ...
imagemin
nesnesineoptions
özelliği ekleyerek PNG resimleri sıkıştırmak için ayarlar ekleyin. Buoptions
özelliği aşağıdaki gibi görünmelidir:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), ] }, dynamic: { ...
Bu kod, Imagemin'e Pngquant eklentisini kullanarak PNG'leri sıkıştırmasını söyler. quality
alanı, sıkıştırma seviyesini belirlemek için min
ve max
değer aralığını kullanır. 0 en düşük, 1 ise en yüksek değerdir. Tüm resimleri% 50 kalitede sıkıştırılmaya zorlamak için hem minimum hem de maksimum değer olarak 0.5
değerini geçirin.
✔️ Check-in
gruntfile.js
dosyanız artık şu şekilde görünmelidir:
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']);
Peki ya JPEG'ler? Projede JPEG resimler de bulunduğundan, bunların nasıl sıkıştırılacağını da belirtmeniz gerekir.
Imagemin yapılandırmanızı özelleştirme (devamı)
JPEG resimlerini sıkıştırmak için sizin için yüklü olan imagemin-mozjpeg
eklentisini kullanın.
- Bu satırı
gruntfile.js
öğesinin en üstüne koyarakimagemin-mozjpeg
eklentisini bildirin.
const mozjpeg = require('imagemin-mozjpeg'); const pngquant = require('imagemin-pngquant'); const grunt = require('grunt');
- Ardından,
options
nesnesindeki diziyemozjpeg({quality: 50})
ekleyin. Bu dizi artık şu şekilde görünmelidir:
grunt.initConfig({ imagemin: { options: { use: [ pngquant({quality: [0.5, 0.5]}), mozjpeg({quality: 50}) ] }, dynamic: {
✔️ Check-in
gruntfile.js
dosyanız artık şu şekilde görünmelidir:
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']);
Grunt'ı çalıştırma ve sonuçları Lighthouse ile doğrulama
- Araçlar düğmesini tıklayın.
- Ardından Konsol düğmesini tıklayın.
- Konsola aşağıdaki komutu yazarak Grunt'ı çalıştırın:
grunt
Grunt işlemi tamamladığında konsolda şuna benzer bir mesaj görürsünüz:
Minified 6 images (saved 667 kB - 66.5%)
Tebrikler! Bu sonuçlar çok daha iyi.
Son olarak, yaptığınız değişiklikleri doğrulamak için Lighthouse'u kullanmak iyi bir fikirdir. Lighthouse'un "Resimleri verimli şekilde kodlayın" performans denetimi, sayfanızdaki JPEG resimlerinin en iyi şekilde sıkıştırılıp sıkıştırılmadığını bilmenizi sağlar.
- Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
- Glitch'inizin canlı sürümünde Lighthouse performans denetimini (Lighthouse > Seçenekler > Performans) çalıştırın ve "Görüntüleri verimli şekilde kodla" denetiminin geçtiğini doğrulayın.
Başarıyla gerçekleştirildi. Sayfanızdaki resimleri en iyi şekilde sıkıştırmak için Imagemin'i kullandınız.