Tem.20

Gulp Dersleri – Part 10 – Resimleri Optimize Etmek (gulp-smushit)

Resimleri görüntü kalitesi kaybına uğratmadan biraz da olsa küçültebiliriz. Eğer dosya boyutu olarak çok daha fazla küçültülme gereksinimi varsa, mutlaka grafiker tarafından hazırlanması gerekmektedir. Gerçi Gulp’ta bunun için de bir modül var ve bu modül ile Quality değerleri düşürülerek resim optimize edilir, ancak tavsiye etmem.

Kullanacağımız modülümüz gulp-smushit. Aşağıdaki komut ile bu modülü yükleyin.

npm install –save-dev gulp-smushit

gruntfile.js içinde modülümüzü ekleyin ve bir değişkene atayın.

, smushit = require(‘gulp-smushit’);
smusiht değişkenine modülümüzü atadık. Aşağıdaki şekilde görüldüğü gibi de Task’ımızı oluşturalım.
gulp.task(‘smushit’, function () {
return gulp.src(‘dev/images/*’)
.pipe(smushit({
verbose: true
}))
.pipe(gulp.dest(‘dist/images’));
});

Task’ımızın ismi smushit. dev/images klasörü içindeki bütün dosyaları optimize edip, dist/images içine atıyor. verbose parametresine true verilirse, optimizasyon detayları Command Prompt’ta gösterilir, false verilirse gösterilmez.

Şunu belirtmekte fayda var, eğer resimleriniz zaten optimize edilmişse ve dosya boyutu da küçükse, hazırladığımız Task işe yaramayabilir. Aslında çalışır ama zaten optimize edilmiş olanı bir daha optimize edemez. Test amaçlı olarak 670 KB’lik bir JPG dosyasını da dev/images içine koydum ve %2’lik bir optimizasyon sağlayarak 650 KB kadar bir değere düşürebildi. Diğer logo ve ikon dosyamızı da %0 optimize etti, yani etmedi.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum