Hazırladığımız sitelerde birçok eklenti kullanıyoruz. jQuery, bootstrap, lightbox eklentileri, slider eklentileri ve daha birçok eklenti daha.
Sitemize her eklediğimiz eklenti sitemizi yavaşlatacak ve farklı linklere sorgu gönderecektir. Örneğin sitemize eklediğimiz 5 CSS dosyası ve 5 JavaScript dosyası sitemizin yüklenirken tarayıcının 10 farklı bağlantıya sorgu gönderip sorgu alması anlamına gelmektedir.
Bu sorguları azaltmak için tüm CSS (StyleSheet) dosyalarını ve JS (JavaScript) dosyalarını tek dosya altında toplamamız gerekmektedir. Eklentiler içinde resim ve font dosyaları da mevcut ise bütün bunların kendine özgü klasörleri ortalığı iyice karıştırmakta.
Tüm projeleriniz ve siteleriniz için her defasında bu işlemleri yapmak oldukça zahmetli bir iş. Bu zahmetten kurtulmak için geliştirilen kolay bir yazılım mevcut.
Öncelikle yapmanız gereken jslibgen.com sitesini ziyaret etmek.
“Select Your Library” bölümünden istediğiniz kütüphaneleri arattırarak hızlı bir şekilde ulaşabilirsiniz.
Örneğin sitemize jQuery eklemek istiyoruz. Arama kutucuğuna jquery yazarak hızlı bir şekilde erişip başlığına tıklıyoruz.
Başlığına tıkladıktan sonra versiyon seçimi yapıyoruz. Örnek için jQuery için 2.0.3 versiyonunu kullanacağım. Seçimi yaptıktan sonra sağ bölümde jQuery v2.0.3 ile ilgili tüm dosyalar sıralanıyor. Benim ihtiyacım olan sadece jquery.min.js dosyası olduğu için sadece o dosyayı seçiyorum.
Sonra siteme Twitter Bootstrap eklemek istiyorum. “twitter” şeklinde arattırdığımızda hemen ulaşıyor ve başlığına tıklıyoruz. Örneğimizde 3.1.1 versiyonunu seçiyorum. TRL desteği ve tema istemediğim için sadece bootstrap.min.css, bootstrap.min.js ve font dosyalarını seçiyorum.
Bu şekilde istediğiniz kütüphane ekleyebilirsiniz.
Kütüphanelerinizi seçtikten sonra GENERATE & DOWNLOAD butonuna tıklıyoruz.
Karşımıza çıkan pencereden CSS ve JS dosyalarını sıralamamız gerekmektedir. Örneğimizde jquery.min.js dosyasının bootstrap.min.js dosyasından önce yüklenmesi önemlidir. Çünkü bootstrap.min.js dosyasının çalışabilmesi için jquery.min.js dosyasının daha önceden yüklenmiş olması gerekmektedir. Bunun gibi birçok kütüphane farklı kütüphanelerin önceden yüklenmiş olmasını beklemektedir. Bu nedenle bu örneğimizde jquery.min.js dosyasını en üste, bootstrap.min.js dosyasını onun arkasına ekliyoruz. Elimizde sadece 1 tane CSS dosyası bulunduğu için o bölümde sıralamaya ihtiyaç yok. Eğer bootstrap kullanan bir kütüphaneyi eklersek, bu kütüphaneye ait css dosyalarını bootstrap.min.css dosyasından sonra, js dosyalarını ise bootstrap.min.js dosyasından sonra eklememiz gerekecektir.
Sonrasında DOWNLOAD tuşuna tıklayarak sistemin oluşturacağı dosyayı bilgisayarımıza indiriyoruz.
İndirile zip dosyası içerisindeki klasörleri kontrol ettiğimiz zaman aşağıdaki yapıda bir klasör sistemi ortaya çıkıyor.
css klasörü altında plugins.css dosyası oluşturulmuş ve seçtiğimiz css dosyası belirlediğimiz sıra ile bu dosyaya eklenmiş.
js klasörü altında plugins.js dosyası oluşturulmuş ve seçtiğimiz css dosyaları belirlediğimiz sıra ile bu dosyaya eklenmiş.
Eğer seçtiğimiz kütüphaneler içerisinde resim dosyaları bulunuyor olsaydı img adında bir klasör oluşturulup resim dosyaları bu klasör altında toplanılacaktı.
Tüm font dosyaları fonts klasörü altında ve geriya kalan tüm dosya türleri ise data klasörünün altında toplanacaktır.
Sistem css dosyaları içerisindeki tüm bağlantıları kontrol edip kendi oluşturduğu klasörlere göre düzenlemektedir.
Şu an yapmanız gereken sadece plugins.css ve plugins.js dosyalarını sisteminize eklemek olacaktır.
2014 © Web Fikirleri - Her Hakkı Saklıdır.
