4

Pesquisei na internet meios de se juntar Folhas de Estilos CSS e Folhas de Scripts JS de forma automatizada, porém, não obtive bons resultados.

Possuo cerca de 17 Folhas de Estilo e 15 Scripts, se eu fizer manualmente eu ficarei "doido" e demorarei bastante.

Alguém conhece uma ferramenta online ou software que me possibilite fazer isso de forma automatizada?

Ex: Mando todos os arquivos (folhas) para o site e já baixo o arquivo com as folhas já unidas, ou algum software que faça isso de forma automatizada.

5
  • 3
    Da uma olhada no grunt Commented 24/07/2014 às 2:02
  • @Rodrigo transforme seu comentário em resposta. Commented 24/07/2014 às 2:47
  • 1
    em aplicativos pequenos eu utilizo o cat e se eu nomear os arquivos com prefixo numérico eu consigo a ordem que quero no arquivo compilado
    – neoprofit
    Commented 24/07/2014 às 12:48
  • @neoprofit que cat? Transforme seu comentário em resposta! :D Commented 24/07/2014 às 15:15
  • 1
    @AlexandreLopes fiz conforme sugeriu.Obrigado
    – neoprofit
    Commented 25/07/2014 às 13:02

4 Respostas 4

2

Darei uma resposta simples, que, de forma alguma atende projetos grandes, e resolve compilação e redução de arquivos, mas que eu utilizo em pequenos projetos.

Veja a arvore de exemplo:

root
   js/
     - compilado.js
     src/
        - 01-core.js
        - 02-functions.js
        - 03-extra.js

Para gerar compilado.js:

cd js;
cat src/*.js > compilado.js

O mesmo pode ser feito com o css

3
  • Não entendi. Como faz isso? Através de um programa? o.O Commented 25/07/2014 às 20:22
  • 1
    cat e cd são programas da linha de comando *nix (Linux e Mac) mas que você tbm consegue instalar no Windows, se for o seu caso.
    – neoprofit
    Commented 28/07/2014 às 11:59
  • Obrigado!...... Commented 28/07/2014 às 16:52
1

Entre nesse site e faça o upload dos múltiplos arquivos.

http://refresh-sf.com/yui/

Em breve o site será movido, existe um novo endereço sendo informado na página, adicione aos seus favoritos.

3
  • Muito bom! Excelente! Mas o ruim é que estão querendo tirar o site e colocar outro sem muitas funções. Pelo que eu vi o novo site servirá só para minificar as folhas. triste :( Mas vou usá-lo bastante antes que isso aconteça :D Commented 24/07/2014 às 15:34
  • 1
    Ao que parece vai ser apenas visual!
    – Premiere
    Commented 24/07/2014 às 16:35
  • Tomara que sim! Só que eu vi que não vai ter o yui Compressor Commented 24/07/2014 às 23:02
1

Para fazer "bundling" (juntar vários arquivos CSS e javascript em um) eu uso o a extensão do Web Essentials para o Visual Studio Express 2013 for Web ( http://vswebessentials.com/features/bundling )

Mas pesquisando... encontrei algumas outras que aqui compartilho :

Essas ferramentas também fazem "minification" ( uma forma de otimizar os arquivos para eles ficarem menores)

1
  • Muito legal! Não conhecia essa extensão do Visual Studio. :D Commented 24/07/2014 às 15:20
1

Há poucos dias estou utilizando uma ferramenta chamada Gulp, que de modo simples você pode criar tarefas para automatizar esse processo de build.
Uma das tarefas mais comuns é concatenar arquivos tanto JS quanto CSS, que é o seu caso.

Dê uma olhada nesses links:
* Gulp Getting Started - https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md#getting-started
* Gulp Concat - https://github.com/wearefractal/gulp-concat

Se der certo de concatenar os arquivos, talvez também seja uma boa ideia fazer a minificação para que eles diminuam de tamanho, procure por Gulp Uglify e Gulp Minify CSS.

Espero ter te dado novas idéias,
André

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .