it-swarm-eu.dev

Co bych měl použít k automatické kombinaci souborů css / js?

Jsem si vědom sprockets pro kombinaci souborů javascript, ale nezkoušel jsem to. Jaké jsou další možnosti a jak se hromadí?

optimizationjavascriptcss
14
Cebjyre

Napsal jsem popisovač pro Asp.Net, který používá YUI ke kompresi, zřetězení a uložení výstupu do mezipaměti.

Zde je zdroj: http://Gist.github.com/13091

4
travis

Tento problém jsem již řešil v další otázka

V opačném pohledu jsem se to měl zeptat na webmastery místo na místě programátorů.

Máte 3 možnosti:

  1. Nechte svůj rámec zpracovat automaticky
  2. Nechte svůj webový server zpracovat automaticky
  3. Chcete-li to provést ručně, použijte vlastní možnost

Možnost 1 (pomocí rozšíření CakePHP):

Stáhněte a nainstalujte AssetPacker na svůj web (což také vyžaduje jsmin a CSSTidy). Upravte několik řádků zdroje, které obsahují soubory js. Omyjte-> Opláchněte-> Opakujte. Voila, zbytek se děje automaticky za vás.

Pokud použijete nějaký jiný rámec, je pravděpodobné, že existuje nástroj, který to splní za vás. Ve světě webdevů je to docela běžný požadavek.

Možnost 2 (pomocí modu Apache):

Podívejte se na Google Pagespeed mod pro Apache . Dělá všechno, co popíšete, a mnohem víc.

Nezapomeňte však sledovat zdroje produkčního serveru. Někteří lidé se potýkají s problémy, kde to špatně zvyšuje zatížení jejich serveru. Nejsem pozitivní, ale může to vyžadovat dostatečnou strategii statického obsahu, aby byla efektivní volbou.

Možnost 3:

Pokud opravdu chcete, můžete vytvořit nějakou magii PHP, která zřetězí souborový server JS a zkombinuje všechny odkazy na jednu, ale ... To je přesně to, co obě dvě strategie stejně dělají.

Osobně bych důrazně nedoporučoval tuto možnost.

Pokud vím, Sprockets spojuje soubory JS stejně jako AssetPacker, je implementován pouze jako Ruby Gem. Co nečiní, je minifikování kódu js. Takže, pokud jej použijete, je asi dobrý nápad chytit i drahokam jsmin. Informace o použití řetězových kol + JSMin v CakePHP najdete v této části .

Vím, že kladu důraz na CakePHP, ale ... Předpokládám, že pokud lze plugin přizpůsobit CakePHP, mělo by být triviální přizpůsobit ho jinému rámci.

2
Evan Plaice

Pokud je váš webový prohlížeč v PHP, měli byste zvážit použití minify :

Kombinuje více souborů CSS nebo Javascript, odstraňuje zbytečné bílé znaky a komentáře a obsluhuje je s kódováním gzip a optimálním záhlavím mezipaměti na straně klienta.

1
Tom

Rychlé vyhledávání google zjistí, že kombinuje CSS soubory: http://www.tothepc.com/archives/combine-merge-multiple-css-files/

1
Macha

Jste si jisti, že je chcete kombinovat? Pokud používáte společnou knihovnu, můžete využít CDN k doručování vašich javascriptů. Poté můžete využít mezipaměť prohlížeče (za předpokladu, že jiné weby používají stejný CDN) a distribuované doručení. Microsoft a Google každý má řešení (já jsem také upřímně nepoužil, ale určitě začnu) a mohou existovat i další.

1
Larry Smithmier

U projektů ASP.NET jsem se stal součástí mého procesu sestavování založeného na pokyny od Karla Seguina .

Karl to popisuje nejlépe na svém blogu, ale krátkou verzí je nastavení aplikace konzoly zabalující YUICompressor. Poté můžete nastavit úlohu po sestavení, která bude volat tuto konzolovou aplikaci proti umístění souborů JS na vašem webu.

1
Raleigh Buckner

Pro tuto znalost by Python mohlo být skutečně užitečné. Můžete se učit Python docela rychle. Začal jsem asi před 2 týdny a moje první aplikace (která ještě není dokončena) bude dělat přesně to samé, co chcete. Stejně jako kompilátor DotLess bude mít funkci sledování, která se bude dívat na soubory nebo adresáře, a pokud se změní, vygeneruje nový soubor.

Python je také skvělý pro jiné úkoly údržby a četl jsem mnoho systémových administrátorů, kteří ho rádi používají.

1
Pickels

Vytvořil jsem Minifpy : nástroj napsaný v Python3 (kompatibilní s Mac OS, Windows a Linux) pro sloučení a minimalizaci souborů JS a CSS pomocí Pythonu.

Minifpy používá velmi snadný konfigurační soubor JSON k definování, které soubory musí být sloučeny, minifikovány nebo ne:

{
    "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"}
        ]
    }
}

Tento nástroj můžete také použít v CLI.

Minifpy detekuje jakékoli změny v souborech JS/CSS a automaticky je slučuje/minifikuje (užitečné pro vývoj).

0
Samuel Dauzon