Imagemin'i Grunt ile kullanma

Katie Hempenius
Katie Hempenius
X

Imagemin Grunt eklentisini kurun

Bu Aksaklık zaten grunt, grunt-cli ve grunt-contrib-imagemin değerlerini içeriyor eklentisidir. Imagemin yapılandırmasını eklemek için gruntfile.js dosyası oluşturun.

  • Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
  • gruntfile.js içindeki //Add configuration here yorumu değiştirin şu kod bloğuyla:
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 bildirir.

  • dynamic, sıkıştırılacak dosya listesinin dinamik olacağını belirtir oluşturulan dosya adları, dosya adlarının belirtilen dosya kalıbıyla eşleştirilerek oluşturulur.

  • Dosya deseni {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} images/ dizinindeki tüm JPEG ve PNG resimlerle eşleşir.

  • Görüntünün hemen önüne bu satırı ekleyerek Imagemin görevini yükleyin grunt.registerTask(...):
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ı aşağıdaki gibi görünecektir:

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 belirlemeye yönelik bir eklentidir. imagemin-pngquant, bu projeye package.json dosyası olarak ayarlayın. Kullanmak için eklentiyi bildirin ve Gruntdosyanızda bir sıkıştırma kalitesi düzeyi belirtin.

  • Bu satırı sayfanızın en üstüne ekleyerek imagemin-pngquant eklentisini bildirin. gruntfile.js:
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • options imagemin nesne algılandı. 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. İlgili içeriği oluşturmak için kullanılan quality alanı,minmax sıkıştırma seviyesi: 0 en düşük, 1 ise en yüksek değerdir. Tüm resimleri %50 kalitede sıkıştırılması için 0.5 değerini hem minimum hem de maksimum değer olarak iletin.

✔︎ 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'lere? Projede JPEG resimleri de bulunduğundan, onlar da sıkıştırılır.

Imagemin yapılandırmanızı özelleştirme (devamı)

Sizin için daha önce yüklenmiş olan imagemin-mozjpeg eklentisini kullanarak JPEG resimlerini sıkıştırın.

  • Bu satırı sayfanızın en üstüne koyarak imagemin-mozjpeg eklentisini bildirin. gruntfile.js.
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • Sonra, options nesnesindeki diziye mozjpeg({quality: 50}) öğesini ekleyin. Dizi ş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ır ve Sonuçları Lighthouse ile doğrulayın

  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öreceksiniz:

Minified 6 images (saved 667 kB - 66.5%)

Yaşasın! Bu sonuçlar çok daha iyi.

Son olarak, az önce yaptığınız değişiklikleri doğrulamak için Lighthouse'u yapar. Lighthouse'un "Görüntüleri verimli bir şekilde kodlayın" performans denetimi, sayfanızdaki JPEG resimlerinin optimum şekilde sıkıştırılıp sıkıştırılmadığını öğrenin.

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran tam ekran.
  • Şu öğede Lighthouse performans denetimini (Lighthouse > Seçenekler > Performans) çalıştırın ve Glitch'inizin canlı sürümünü kontrol edin ve "Bu özelliği, resim" denetim başarılı oldu.

"Resimleri verimli bir şekilde kodlama"yı geçme Lighthouse'da denetim

Başarıyla gerçekleştirildi. Sayfanızdaki resimleri en iyi şekilde sıkıştırmak için Imagemin'i kullandınız.