it-swarm-tr.com

Css / js dosyalarını otomatik olarak birleştirmek için ne kullanmalıyım?

Ben javascript dosyalarını birleştirmek için dişlileri farkındayım, ancak denemedim. Diğer bazı seçenekler nelerdir ve nasıl toplanırlar?

14
Cebjyre

Asp.Net için çıktıyı sıkıştırmak, birleştirmek ve önbelleğe almak için YUI kullanan bir işleyici yazdım.

İşte kaynak: http://Gist.github.com/13091

4
travis

Bu konuyu zaten ele aldım başka bir sor

Gezinti sırasında, Programcılar sitesi yerine Webmaster'larda sormalıydım.

3 seçeneğiniz var:

  1. Çerçevenizin otomatik olarak halletmesine izin verin
  2. Web sunucunuzun otomatik olarak işlemesine izin verin
  3. Manuel olarak yapmak için kendi seçeneğinizi kullanın

Seçenek 1 (bir CakePHP uzantısı kullanarak):

İndirin ve kurun AssetPacker sitenize (ayrıca jsmin ve CSSTidy gerektirir). Js dosyalarını içeren birkaç kaynak satırınızı değiştirin. Yıkama-> Rinse-> tekrarlayın. Voila, gerisi sizin için otomatik olarak yapılır.

Başka bir çerçeve kullanırsanız, olasılıklar, bunu sizin için yapacak bir araç var. Webdev dünyasında oldukça yaygın bir gereksinimdir.

Seçenek 2 (bir Apache modunu kullanarak):

Bir göz atın Apache için Google Pagespeed mod . Tarif ettiğiniz her şeyi ve çok daha fazlasını yapar.

Üretim sunucunuzun kaynaklarını yine de izlediğinizden emin olun. Bazı insanlar bunun sunucularına yüklenmesini kötü bir şekilde artırdığı sorunları görüyor. Olumlu değilim ama etkili bir seçenek olmak için yeterli bir statik içerik stratejisi gerekebilir.

Seçenek 3:

Gerçekten istersen, JS dosya sunucusu tarafını birleştiren ve tüm link rel'leri bir araya getiren bazı PHP magic 'i oluşturabilirsin ama ... Bu iki stratejinin zaten ne yaptığını tam olarak yapıyor.

Şahsen, bu seçeneğe karşı şiddetle öneriyorum.


Bildiğim kadarıyla Sprockets JS dosyalarını AssetPacker ile aynı şekilde birleştiriyor, sadece bir Ruby Gem olarak uygulandı. Yapmaması gereken, js kodunu küçültmektir. Yani, kullanırsanız, muhtemelen jsmin gem kapmak için iyi bir fikirdir. CakePHP'de Sprockets + JSMin'i kullanma hakkında bilgi için bunu kontrol edin .

CakePHP'ye önem verdiğimi biliyorum ama ... Bir eklenti CakePHP'ye uyarlanabilirse, onu farklı bir çerçeveye uyarlamanın önemsiz olması gerektiğini düşünüyorum.

2
Evan Plaice

Web uygulamanız PHP içindeyse, minify komutunu kullanmalısınız.

Birden fazla CSS veya Javascript dosyasını birleştirir, gereksiz boşlukları ve yorumları kaldırır ve bunları gzip kodlaması ve en iyi istemci tarafı önbellek başlıklarıyla sunar.

1
Tom

Hızlı bir google araması, CSS dosyalarını birleştirmek için bunu bulur: http://www.tothepc.com/archives/combine-merge-multiple-css-files/

1
Macha

Onları birleştirmek istediğinden emin misin? Ortak bir kütüphane kullanıyorsanız, javascriptlerinizi sunmak için bir CDN'den yararlanabilirsiniz. Daha sonra tarayıcı önbelleğinden (diğer sitelerin aynı CDN'yi kullandığını varsayarak) ve dağıtılmış dağıtımdan yararlanabilirsiniz. Microsoft ve Google her birinin çözümleri var (dürüst bir şekilde kullanmadım, ancak kesinlikle başlayacağım) ve başkaları da olabilir.

1
Larry Smithmier

ASP.NET projeleri için --- üzerine inşa sürecimin bir parçası yaptım talimatlar Karl Seguin .

Karl blogunda en iyisini açıklıyor, ancak kısa versiyonu YUICompressor'u saran bir konsol uygulaması ayarlamak. Ardından, bu konsol uygulamasını çağırmak için sitenizdeki JS dosyalarının bulunduğu yere karşı bir derleme görevi ayarlayabilirsiniz.

1
Raleigh Buckner

Bunun bilinmesi için Python aslında faydalı olabilir. Python oldukça çabuk öğrenebilirsin. Yaklaşık 2 hafta önce başladım ve ilk başvurum (hala bitmedi) tam istediğiniz şeyi yapacak. DotLess derleyicisi gibi, dosyalara veya dizinlere bakacak olan bir saat işlevine sahip olacak ve eğer değiştirilirse yeni bir dosya üretecektir.

Python ayrıca diğer bakım işleri için de harika ve birçok sistem yöneticisini de kullanmayı seviyorum.

1
Pickels

Python kullanarak Minifpy : JS ve CSS dosyalarını birleştirmek ve küçültmek için Python3'te (Mac OS, Windows ve Linux uyumlu) yazılmış bir araç yarattım.

Minifpy, hangi dosyaların birleştirilmesi, küçültülmesi veya küçültülmeyeceğini tanımlamak için çok kolay bir JSON yapılandırma dosyası kullanır:

{
    "js": {
        "minify_files": [
            {"from": "static/file.js", "to":"static/file.min.js"},
        ],
        "merge_files": [
            {"from" : ["static/file1.js", "static/file2.js"], "to":"static/public.js", "to_min": "static/public.min.js"}
        ]
    },
    "css" : {
        "minify_files": [
            {"from": "static/file.css", "to":"static/file.min.css"},
        ],
        "merge_files": [
            {"from" : ["static/file1.css", "static/file2.css"], "to":"static/public.css", "to_min": "static/public.min.css"}
        ]
    }
}

Bu aracı CLI'da da kullanabilirsiniz.

Minifpy, JS/CSS dosyalarındaki değişiklikleri algılar ve otomatik olarak birleştirir/küçültür (geliştirme için kullanışlıdır).

0
Samuel Dauzon