May.27

Grunt Dersleri 10: CSS Dosyalarını Birleştirme (concat)

Eğer elinizde birkaç adet CSS dosyası varsa (Bootstrap haricinde), bunları birleştirip kullanmanız daha faydalı olacaktır. Hem paketlerken dosya kalabalığından kurtulursunuz, hem de web sayfanız yayındayken sunucudan onlarca dosya çekmek yerine tek bir seferde dosya çekilmesi az da olsa hız kazandırır.

npm install grunt-contrib-concat –save-dev

JS Ekleme Komutu:

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

Örneğimizde, az önce SASS’tan CSS’e çevirdiğimiz body.css ve sayfa.css dosyaları var (Daha fazla da olabilirdi). Bunları birleştirerek stil.css adında bir CSS dosyası oluşturalım.

concat: {   
dist: {
           src: [
                  'css/*.css', '!css/stil.css',
           ],
           dest: 'css/stil.css',
}
},

dist kısmında kaynak CSS dosyaları gösteriliyor. Dikkat edin, iki adet parametre tanımladık. Birincisinde, css klasörü içindeki tüm dosyaları seç dedik. İkincisinde de başına ! işareti koyarak seçme anlamını tanımlayıp, stil.css dosyasını gösterdik. Yani stil.css dosyası dışındaki tüm css dosyaları seçilecek. dest kısmında ad birleştirilen dosyanın nereye hangi isimle kaydedileceği tanımlanıyor.

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