Combine e reduza vários arquivos CSS / JS

Estou tentando otimizar o desempenho de um site consolidando e compactando os arquivos CSS e JS. Minha pergunta é mais sobre os passos (concretos) de como conseguir isso, dada uma situação real que eu estava enfrentando (deve ser típica entre outros desenvolvedores também).

Minha página faz referência a vários arquivos CSS e JS como os seguintes:

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

Para a versão de produção, gostaria de combinar os 3 arquivos CSS em um e reduzi-los usando, por exemplo, o Compressor YUI . Mas então, eu precisaria atualizar todas as páginas que precisam desses 3 arquivos para fazer referência ao CSS recém-minimizado. Isso parece sujeito a erros (por exemplo, você está removendo e adicionando algumas linhas em muitos arquivos). Qualquer outra abordagem menos arriscada? O mesmo problema para os arquivos JS.

Verifique o minify - permite combinar vários arquivos js e css em um, simplesmente empilhando-os em um url, por exemplo

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

Nós o usamos há anos e ele faz um ótimo trabalho e na hora (sem necessidade de editar arquivos).

Acho que o Compressor YUI é o melhor que existe. Ele minimiza JS e CSS e até mesmo remove aquelas console.logdeclarações que as pessoas usam para depuração de JavaScript de baixo nível.

Veja como é fácil .

Você pode iniciá-lo em uma tarefa ant e, portanto, incluí-lo em seus ganchos de post / pre-commit se usar svn / git.

ATUALIZAÇÃO: Hoje em dia eu uso o grunt com as contribuições concat, minify e uglify. Você pode usá-lo com um observador para que ele crie novos arquivos minimizados em segundo plano sempre que você alterar a fonte. O uglify contrib não apenas remove os logs do console, mas também remove funções e propriedades não utilizadas.

Veja este tutorial para uma breve visão.

ATUALIZAÇÃO: Hoje em dia as pessoas deixam de usar o grunt e seu antecessor "gulp" e usam o npm como uma ferramenta de construção. Leia sobre isso aqui .

ATUALIZAÇÃO: Agora as pessoas usam o yarn para executar o npm. Não admira; o ícone de fios é um gato. A maioria das estruturas atuais usa webpack para agrupar os recursos em pacotes, que então também cuidam da minificação .

Eu precisaria atualizar todas as páginas que precisam desses 3 arquivos para fazer referência ao CSS recém-minimizado.

Em primeiro lugar, eu diria que você deve ter um cabeçalho comum. Portanto, não será necessário alterar todos os cabeçalhos o tempo todo, sempre que necessário. É uma boa prática ter um cabeçalho único ou 2-3. Assim, conforme a necessidade de sua página, você pode alterar o cabeçalho. Portanto, sempre que você quiser estender seu aplicativo da web, será menos arriscado e tedioso.

Você não mencionou seus ambientes de desenvolvimento. Você pode ver que há muitas ferramentas de compactação listadas para diferentes ambientes . E você está usando uma boa ferramenta de compressor ieYUI.

Acabei usando CodeKit para concatenar meus arquivos CSS e JS. O recurso que considero realmente útil é a capacidade de fazer a concatenação ao salvar o arquivo; porque monitora os respectivos ativos CSS / JS. Depois de combiná-los adequadamente, por exemplo, para 1 arquivo CSS e 1 arquivo JS, todos os outros arquivos simplesmente podem se referir a esses 2.

Você pode até pedir ao CodeKit para fazer a minificação / compactação em tempo real.

Isenção de responsabilidade: Não sou afiliado de forma alguma ao CodeKit. Eu o encontrei aleatoriamente na web e ele tem servido como uma ótima ferramenta no meu processo de desenvolvimento. Ele também vem com boas atualizações desde que o usei pela primeira vez, há mais de um ano.

Dica rápida para usuários do Windows, se você quiser apenas concatear arquivos:

Abra um cmd no local desejado e apenas canalize seus arquivos para um arquivo usando " tipo "

ex:

type .\scripts\*.js >> .\combined.js

Se a ordem de seus scripts for importante, você deve digitar explicitamente os arquivos, na ordem desejada .

Eu uso isso em um arquivo bat para meus projetos angular / bootstrap

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

É 2015 ano na rua e a maneira mais fácil imo é usando o goleiro - http://gulpjs.com/ . A redução do código usando gulp-uglify para scripts js e gulp-minify-css para css é muito simples. Gulp definitivamente vale a pena tentar

Não vejo você mencionar um sistema de gerenciamento de conteúdo (Wordpress, Joomla, Drupal, etc), mas se você estiver usando qualquer CMS popular, todos eles têm plug-ins / módulos disponíveis (também opções gratuitas) que irão minimizar e armazenar em cache seu css e js.

O uso de um plug-in oferece a capacidade de manter as versões descompactadas disponíveis para edição; então, quando as alterações são feitas, o plug-in inclui automaticamente suas alterações e compacta novamente o arquivo. Apenas certifique-se de escolher um plug-in que permitirá excluir arquivos (como um arquivo js personalizado) no caso de quebrar alguma coisa.

Eu tentei no passado manter esses arquivos atualizados manualmente e isso sempre se transforma em um pesadelo de manutenção. Boa sorte, espero que tenha ajudado.

Para pessoas que querem algo um pouco mais leve e flexível, criei o js.sh hoje para resolver esse problema. É uma ferramenta de linha de comando simples voltada para arquivos JS que podem ser facilmente modificados para cuidar de arquivos CSS também. Benefícios:

• Facilmente configurável para uso por vários desenvolvedores em um projeto
• Combina arquivos JS na ordem especificada em script_order.txt
• Compacta-os com o Closure Compiler do Google
• Divide JS em pedaços <25kb onde possível, pois o iPhone não armazenará em cache nada maior que 25kb
• Gera um pequeno arquivo PHP com <script>tags que você pode incluir quando apropriado
• Uso: js.sh -u yourname

Ela poderia precisar de algumas melhorias, mas é melhor para meu caso de uso do que todas as outras soluções que vi até agora.

A primeira etapa da otimização é a minimização do arquivo. (Eu recomendo fortemente GULP para minimização e otimização. Sua solução de observação simples, instalação e todos os arquivos são compactados de uma vez. Suporta todos os CSS, JS, less, sass, etc ...)

OU Solução da velha escola:

1) Em geral, como um processo de otimização, para otimizar o desempenho de um site, tente mesclar todos os CSS em um arquivo e compacte o arquivo usando o Compass . Dessa forma, seus vários pedidos de CSS estático serão substituídos por um único.

2) Problema de múltiplos JS que você pode resolver usando CDN (ou Google Hosted Libraries) para que as solicitações sejam enviadas para outro servidor que não seja o seu. Dessa forma, o servidor não espera a conclusão da solicitação anterior antes de enviar a próxima.

3) Se você tiver seu próprio JavaScript armazenado localmente, minimize cada arquivo usando o plug-in Brackets "Compress JavaScript". É basicamente um clique para compactar JavsScript. Brackets é um editor gratuito feito para CSS e JS, mas pode ser usado para PHP e outras linguagens. Há muitos plug-ins para escolher feitos para desenvolvedores front-end e back-end. Em geral, "um clique" para fazer todos esses comandos (até agora vários). Btw, Brackets substituiu meu Dreamweaver muito caro;)

3) Tente usar ferramentas como Sass , Compass, menos para minimizar seu CSS.

Nota: Mesmo sem usar a mixagem SASS ou variáveis, seu CSS será compactado (basta usar CSS puro e o comando Compass "watch" irá compactá-lo para você).

Eu espero que isso ajude!

Se você está fazendo qualquer pré-processamento nos arquivos que serve, provavelmente deseja configurar um sistema de compilação adequado (por exemplo, um Makefile). Dessa forma, você tem alguns arquivos de origem sem duplicação, e sempre que fizer uma alteração, você executa 'make' e traz todos os arquivos gerados automaticamente atualizados. Se já houver um sistema de construção em vigor, aprenda como ele funciona e use-o. Caso contrário, você precisará adicionar um.

Portanto, primeiro, descubra como combinar e reduzir seus arquivos da linha de comando (a documentação do YUICompressor cobre isso). Designe um diretório para o material gerado automaticamente, separado do material em que você trabalha, mas acessível ao servidor da web, e a saída para lá, por exemplo, gen / scripts / mixed.js. Coloque os comandos que você usou em um Makefile e execute novamente 'make' toda vez que fizer uma alteração e quiser que ela tenha efeito. Em seguida, atualize os cabeçalhos em outros arquivos para apontar para os arquivos combinados e minimizados.

No meu projeto symfony eu faço algo assim

{# layout.html.twig #}

{% block styles %}
    {% if app.environment == 'prod' %}
        <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
        <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
    {% endif %}
{% endblock %}

{# some-view.html.twig #}

{% extends 'AppMainBundle::layout.html.twig' %}

{% block styles %}
    {{ parent() }}

    {% if app.environment != 'prod' %}
        <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
{% endblock %}

Quando a versão dev está pronta para produção, uso este script para combinar todos os arquivos css e substituir o conteúdo do min.css.

Mas esta solução funciona apenas se os mesmos arquivos css forem incluídos em todas as páginas.

Você pode usar o módulo de nó cssmin que é construído a partir do famoso compressor YUI

$ npm -g i cosmic # install

# Usage   
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);

Todos os utilitários mais rápidos são encontrados aqui

http://www.code-stuff.net
http://www.code-stuff.net/HttpUtility
http://www.code-stuff.net/HttpUtility/minifyCSS
http://www.code-stuff.net/HttpUtility/stringify_json