Asp.net Core CSS ve Javascript Birleştirme

Asp.net Core CSS ve Javascript Birleştirme

umutduran

14 Tem, 2020 09:32

umutduran

Merhaba arkadaşlar,

Bu yazımda sizlere BuildBundlerMinifier kullanarak sitemizin javascript ve css dosyalarını birleştirip küçültmeyi göstereceğim. Biliyorsunuz teknolojinin gelişmesi ile birlikte web projelerimizde artık kendimiz yazmak yerine belirli componentler kullanır olduk. Durum böyle olunca her eklentinin kendine has javascript ve css dosyasını projeye entegre etmek zorunda kalıyoruz. Fakat hostingimiz çok iyi değilse ki iyi olsa bile binlerce kişinin girdiği bir web sitesi olduğunuzu düşünün, yinede sıkıntılar olacak ve hostinginiz yetersiz kalacaktır.

İşte bu sorunların önüne bir nebze olsa geçebilmek için size sitenin boyutunu nası küçültebileceğimizi anlatacağım. Bunu CSS ve JS dosyalarını küçülerek yapacağız.

Öncelikle aşağıdaki ekrandaki eklentiyi kuruyoruz.

Ben her ikisinide kurdum çünkü benim projem bunu gerektiriyordu. Siz framework kullanıyorsanız üsttekini core kullanıyorsanız ise alttakini yükleyin. 

Daha sonrasında projenize bundleconfig.json isimli dosyamızı ekliyoruz. 

[
  {
    "outputFileName": "wwwroot/lib/tema/site.min.css",
    "inputFiles": [
      "wwwroot/lib/tema/css/bootstrap.css",
      "wwwroot/lib/tema/vendors/linericon/style.css",
      "wwwroot/lib/tema/css/font-awesome.min.css",
      "wwwroot/lib/tema/vendors/owl-carousel/owl.carousel.min.css",
      "wwwroot/lib/tema/vendors/lightbox/simpleLightbox.css",
      "wwwroot/lib/tema/vendors/nice-select/css/nice-select.css",
      "wwwroot/lib/tema/vendors/animate-css/animate.css",
      "wwwroot/lib/tema/vendors/jquery-ui/jquery-ui.css",
      "wwwroot/lib/tema/css/style.css",
      "wwwroot/lib/tema/css/responsive.css"

    ]
  },
  {
    "outputFileName": "wwwroot/lib/tema/site.min.js",
    "inputFiles": [
      "wwwroot/lib/tema/js/jquery-3.2.1.min.js",
      "wwwroot/lib/js/jquery.sticky-sidebar.js",
      "wwwroot/lib/tema/js/popper.js",
      "wwwroot/lib/tema/js/bootstrap.min.js",
      "wwwroot/lib/tema/js/stellar.js",
      "wwwroot/lib/tema/vendors/lightbox/simpleLightbox.min.js",
      "wwwroot/lib/tema/vendors/nice-select/js/jquery.nice-select.min.js",
      "wwwroot/lib/tema/vendors/isotope/imagesloaded.pkgd.min.js",
      "wwwroot/lib/tema/vendors/isotope/isotope-min.js",
      "wwwroot/lib/tema/vendors/owl-carousel/owl.carousel.min.js",
      "wwwroot/lib/tema/vendors/jquery-ui/jquery-ui.js",
      "wwwroot/lib/tema/js/jquery.ajaxchimp.min.js",
      "wwwroot/lib/tema/js/mail-script.js",
      "wwwroot/lib/tema/js/theme.js"

    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false,
    "scripts": {
      "precompile": [
        "dotnet bundle"
      ]
    }
  }
]

Bu dosyanın içini yukarıdaki gibi düzenliyoruz. Ben kendi projemdekini ekledim o sebeple böyle uzun. Sizin yazdığınız daha uzunda olabilir çünkü inputfiles bölümüne birleştirilmesini istediğiniz dosyaları, outputFileName kısmına ise çıkış dosyasının yolunu ve ismini yazıyoruz.

Bakın burada önemli olan kısım şu precompile yazan bölümü dotnet bundle olarak ayarlıyoruz. Bu aslında cmd ekranında çalıştırılan komuttan farklı değil. Bunu yazdığınız zaman projenize tıklayıp tekrar derle dediğinizde bütün dosyalar derlenecek ve bundleconfig.json dosyanızın içinde yazanlarda işleme alınmış olacak. Çıkış dosyalarınız oluşturulacak ve bu dosyaları artık sitenize ekleyebilirsiniz. 

Yalnız unutmayın tekrar derleme yapmazsanız css dosyanızda yaptığınız değişiklikler birleştirilmiş dosyanıza yansımayacaktır.

İyi bloglamalar!

Aşağıya mail adresini girerek web sitemdeki makalelere abone olabilirsin. İlgini çekecek bir makale yazdığım zaman seni haberdar edebilirim!

Yorum Yap

*HTML kodlarına izin verilmemektedir. Düz metin olarak yorum giriniz.