Imagemin'i Grunt ile kullanma

Katie Hempenius

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ı ekleyerek imagemin-pngquant eklentisini bildirin:

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

• imagemin nesnesine options özelliği ekleyerek PNG resimleri sıkıştırmak için ayarlar ekleyin. Bu options ö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 koyarak imagemin-mozjpeg eklentisini bildirin.

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');

• Ardından, options nesnesindeki diziye mozjpeg({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

1. Araçlar düğmesini tıklayın.
2. Ardından Konsol düğmesini tıklayın.
3. 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.