Ara.15

Grunt Dersleri 11: CSS Dosyalarını Minimize Etme (cssmin)

Dosyaları birleştirmekle birlikte, ek olarak dosyaları minimiz etme yöntemi ile de dosya boyutları düşürülebilir. Bir CSS kodunda, Tab ve Enter karakterleri her ne kadar görünmüyor olsa da onlar orada varlar ve yer işgal ederler. Bu karakterler, kod geliştiricisi için kodun okunabilirliğini sağlar. Ancak tarayıcıların CSS’i anlaması için bu gibi karakterlerle düzene sokulmuş olmasına gerek yokturdur. Hatta ekstradan iş çıkarırlar. Bu nedenle CSS, JS, HTML gibi dosyaları minimize ederek bu tür karakterlerden arındırmamız faydalı olur.

Yükleme komutu:

npm install grunt-contrib-cssmin –save-dev

JS Ekleme Komutu:

grunt.loadNpmTasks(‘grunt-contrib-cssmin’);

Örneğimizde, birleştirilmiş bir stil.css dosyamız vardı, hatırlayın. Bu dosyayı minimize edelim ve stil.min.css ismi ile yeni bir dosya üzerine yazdıralım (Buradaki min tanımı bir jargondur. Geliştirici dosya isminde .min.css gördüğünde, onun zaten minimize edildiğini anlar). Tabi HTML içinden de yeni dosya ismi ile yeniden link düzenlemesi yapmamız gerekecek.

cssmin: {
target: {
          files: [{
                    expand: true,
                    cwd: 'css',
                    src: ['stil.css', '!*.min.css'],
                    dest: 'css',
                    ext: '.min.css'
          }]
}
}

target içinde, bütün hedeflemeler yapılıyor. expand ile alt dizinlere bakılabiliyor. cwd ile hangi klasörden seçileceği, src ile hangi dosyaların olduğu/olmadığı, dest ile nereye kaydedileceği ve ext ile de dosyanın sonuna yazılacak olan isim belirtiliyor.

Yapılan işlem sonucunda 211 Byte olan dosya, 176 Byte değerine düşmüş. Tabi CSS dosyanızın boyutu ne kadar büyük olursa, hissedilebilir performans artışı da daha fazla olacaktır.

Minimize edilmiş olan stil.min.css dosyası da aşağıdaki gibi görülecektir.

body{background-image:url(../img/arkaplan.jpg);background-repeat:no-repeat;background-size:100% auto;background-position:center center}#sayfa{background-color:#fff;height:100%}

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