O que devo usar para combinar automaticamente arquivos css / js?

Estou ciente das rodas dentadas para combinar arquivos javascript, mas ainda não tentei. Quais são algumas outras opções e como elas se comparam?

Eu escrevi um manipulador para o Asp.Net que usa o YUI para compactar, concatenar e armazenar em cache a saída.

Aqui está a fonte: http://gist.github.com/130913

Eu já resolvi esse problema em outra pergunta

Em retrospectiva, eu deveria ter perguntado nos Webmasters em vez do site Programadores.

Você tem 3 opções:

1. Deixe sua estrutura lidar com isso automaticamente
2. Deixe seu servidor lidar com isso automaticamente
3. Role sua própria opção para fazê-lo manualmente

Opção 1 (usando uma extensão CakePHP):

Baixe e instale o AssetPacker em seu site (que também requer jsmin e CSSTidy). Modifique algumas linhas de origem que incluem os arquivos js. Lavar-> Lavar-> Repetir. Voila, o resto é feito automaticamente para você.

Se você usar alguma outra estrutura, é provável que exista uma ferramenta que faça isso para você. É um requisito bastante comum no mundo webdev.

Opção 2 (usando um mod Apache):

Dê uma olhada no mod do Google Pagespeed para Apache . Faz tudo o que você descreve e muito mais.

Certifique-se de monitorar os recursos do servidor de produção. Algumas pessoas têm visto problemas em que isso aumenta a carga no servidor de uma maneira ruim. Não sou positivo, mas pode exigir uma estratégia de conteúdo estático suficiente para ser uma opção eficaz.

Opção 3:

Se você realmente quiser, poderá criar alguma mágica em PHP que concatene o lado do servidor de arquivos JS e combine todos os rels de link em um, mas ... Isso é exatamente o que as duas estratégias já estão fazendo de qualquer maneira.

Pessoalmente, aconselho fortemente contra essa opção.

Até onde eu sei, o Sprockets concatena os arquivos JS da mesma forma que o AssetPacker, mas é implementado como uma Ruby Gem. O que isso não faz é minificar o código js. Portanto, se você usá-lo, provavelmente também é uma boa ideia pegar a jsmin gem. Para informações sobre como usar Sprockets + JSMin no CakePHP, verifique isso .

Eu sei que coloquei ênfase no CakePHP, mas ... Estou assumindo que, se um plug-in puder ser adaptado ao CakePHP, deve ser trivial também adaptá-lo a uma estrutura diferente.

Uma pesquisa rápida no Google encontra isso para combinar arquivos CSS: http://www.tothepc.com/archives/combine-merge-multiple-css-files/

Tem certeza de que deseja combiná-los? Se você usar uma biblioteca comum, poderá utilizar uma CDN para entregar seus javascripts. Você pode aproveitar o cache do navegador (supondo que outros sites estejam usando o mesmo CDN) e a entrega distribuída. A Microsoft e o Google têm soluções (também não usei honestamente, mas certamente vou começar) e pode haver outras.

Para projetos ASP.NET, fiz parte do meu processo de compilação, com base nas instruções de Karl Seguin .

Karl o descreve melhor em seu blog, mas a versão curta é configurar um aplicativo de console que envolve o YUICompressor. Em seguida, você pode configurar uma tarefa pós-compilação para chamar esse aplicativo de console no local dos arquivos JS em seu site.

Se o seu aplicativo da web estiver em PHP, considere usar o minify :

Ele combina vários arquivos CSS ou Javascript, remove espaços em branco e comentários desnecessários e os serve com codificação gzip e cabeçalhos ideais de cache do lado do cliente.

Para esse conhecimento, o Python pode realmente ser útil. Você pode aprender Python rapidamente. Comecei há cerca de duas semanas e meu primeiro aplicativo (que ainda não foi concluído) fará exatamente a mesma coisa que você deseja. Como o compilador DotLess, ele terá uma função de observação que examinará arquivos ou diretórios e, se eles mudarem, gerará um novo arquivo.

O Python também é ótimo para outras tarefas de manutenção e eu li muitos administradores de sistema que gostam de usá-lo.

Criei o Minifpy : uma ferramenta gravada em Python3 (compatível com Mac OS, Windows e Linux) para mesclar e minificar arquivos JS e CSS usando Python.

O Minifpy usa um arquivo de configuração JSON muito fácil para definir quais arquivos devem ser mesclados, minimizados ou não:

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

Você também pode usar esta ferramenta na CLI.

O Minifpy detecta quaisquer modificações nos arquivos JS / CSS e as mescla / minimiza automaticamente (útil para o desenvolvimento).