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

14

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

optimization javascript css

— Cebjyre
kaynak

2

Ayrıca, gerçek bir cevap olmasa da, kaynak paketleriyle ilgilenebilirsiniz: limi.net/articles/resource-packages Ne yazık ki, henüz kimsenin bunu uyguladığını sanmıyorum.

— luiscubal

4

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

İşte kaynak: http://gist.github.com/130913

— travis
kaynak

2

Başka bir soruda bu sorunu zaten ele aldım

Geriye dönüp baktığımda, bunu Programcılar yerine Web yöneticilerinden sormalıydım.

3 seçeneğiniz var:

Çerçevenizin bunu otomatik olarak halletmesine izin verin
Web sunucunuzun otomatik olarak işlemesine izin verin
Manuel olarak yapmak için kendi seçiminizi yapın

Seçenek 1 (CakePHP uzantısı kullanılarak):

AssetPacker'ı sitenize indirin ve yükleyin (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 senin için otomatik olarak yapılıyor.

Başka bir çerçeve kullanırsanız, bunu sizin için başaracak bir araç var. Webdev dünyasında oldukça yaygın bir gerekliliktir.

Seçenek 2 (Apache modunu kullanarak):

Apache için Google Pagespeed moduna bir göz atın . Açıkladığınız her şeyi ve çok daha fazlasını yapar.

Üretim sunucunuzun kaynaklarını izlediğinizden emin olun. Bazı insanlar bunun sunucularına yükü 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 gerektirebilir.

Seçenek 3:

Gerçekten isterseniz, JS dosyaları sunucu tarafını birleştiren ve tüm bağlantı rel'lerini bir araya getiren bazı PHP büyüsü oluşturabilirsiniz, ancak ... Tam olarak iki stratejinin zaten yaptığı şey budur.

Şahsen, bu seçeneğe karşı şiddetle tavsiye ediyorum.

Bildiğim kadarıyla Sprockets JS dosyalarını AssetPacker ile aynı şekilde birleştirir, sadece bir Ruby Gem olarak uygulanır. Yapmadığı şey js kodunu küçültmektir. Yani, eğer kullanırsanız, muhtemelen jsmin mücevher de kapmak iyi bir fikirdir. CakePHP'de Sprockets + JSMin kullanımı hakkında bilgi için buna göz atın .

CakePHP'ye önem verdiğimi biliyorum ama ... Bir eklentinin CakePHP'ye uyarlanabilmesi durumunda farklı bir çerçeveye uyarlamanın önemsiz olduğunu varsayıyorum.

— Evan Plaice
kaynak

1

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

— Macha
kaynak

Ne yazık ki C # benim için gerçekten uygun değil, ama umarım birisi bundan faydalanır

— Cebjyre

1

Bunları birleştirmek istediğinizden emin misiniz? Ortak bir kütüphane kullanıyorsanız, javascriptlerinizi teslim etmek için bir CDN'den yararlanabilirsiniz. Ardından, tarayıcı önbelleğe almanın (diğer sitelerin aynı CDN'yi kullandığını varsayarak) ve dağıtılmış dağıtımdan yararlanabilirsiniz. Microsoft ve Google'ın her birinin çözümleri var (dürüstçe kullanmadım, ama kesinlikle başlayacağım) ve başkaları da olabilir.

— Larry Smithmier
kaynak

1

ASP.NET projeleri için, Karl Seguin'in talimatlarını temel alarak oluşturma sürecimin bir parçası haline getirdim .

Karl bunu blogunda en iyi şekilde tanımlıyor, ancak kısa versiyonu YUICompressor'u saran bir konsol uygulaması kurmak. Ardından, bu konsol uygulamasını sitenizdeki JS dosyalarının konumuna karşı çağırmak için bir derleme sonrası görevi ayarlayabilirsiniz.

— Raleigh Buckner
kaynak

1

Web uygulamanız PHP ise minify kullanmayı düşünmelisiniz :

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

— Tom
kaynak

1

Bunun için Python aslında faydalı olabilir. Python'u hızlı bir şekilde öğrenebilirsiniz. Yaklaşık 2 hafta önce başladım ve ilk başvurum (hala bitmedi) tam olarak aynı şeyi yapacak. DotLess derleyicisi gibi, dosyalara veya dizinlere bakacak bir izleme fonksiyonuna sahip olacak ve eğer değiştirilirse yeni bir dosya oluşturacaktır.

Python, diğer bakım görevleri için de harika ve ben bunu kullanmaktan hoşlanan birçok sistem yöneticisini okudum.

— pickels
kaynak

Ben daha çok bir Perl erkeğiyim ve muhtemelen birlikte bir şeyler hackleyebilirim, ancak önceden var olan bazı araçları kullanmayı tercih ederim (muhtemelen, daha iyi testler ve hızlı ve kirli çabamdan daha fazla özellik ile).

— Cebjyre

İğrenç öz tanıtım ama @Pickels, bu projeye yardım etmek ister misiniz? code.google.com/p/lesscss-python

— Metalshark

0

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

Minifpy, hangi dosyaların birleştirilmesi, küçültülmesi veya karıştırılmaması gerektiğ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'de de kullanabilirsiniz.

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

— Samuel Dauzon
kaynak