Alguma recomendação para um minificador CSS? [fechadas]


289

Alguma recomendação para um minificador CSS?

Estarei pesquisando no Google e testando alguns, mas suspeitei que a comunidade StackOverflow inteligente, proficiente e curiosamente bonita já tenha avaliado os prós e os contras dos pesos pesados.



20
Preso. Eu tenho lido 'Como fazer amigos e influenciar pessoas'. Não é o suficiente .
2133 Paul Paul Waite

17
Vocês são todos estranhos. Somos inteligentes, proficientes e curiosamente bonitos.
precisa saber sobre o chuck le


3
+1 apenas para entender a 'natureza mutável' das coisas por aqui e para entender e explicar o raciocínio para fechar perguntas como essa - mesmo que seja sua! ;)
Andrew Barber

Respostas:


98

O compressor YUI é fantástico. Funciona em JavaScript e CSS. Confira.


4
Além disso, aqui está um Makefile que fará o download do YUI Compressor, compactará seus arquivos e os reduzirá. github.com/balupton/jquery-sparkle/blob/…
balupton


@ JuniorMayhé Eu usei e meus estilos ficaram completamente confusos, apesar de ter marcado "Minify only, no ofuscation of symbol". opção) ... infelizmente todo minifier que eu tento sempre quebra meus estilos. É porque os minifiers online são uma porcaria? Não deveria ser assim.
Dia28

1
@DiAlex Entendo que muitas delas mexem com nosso código, devemos usá-las com cuidado, sempre escolhendo uma abordagem "conservadora" e não a re-fatoração agressiva. Um conservador removeria apenas espaços desnecessários, pontos e vírgulas à direita, estilos duplicados e assim por diante. Eu acho que um estilo pode ser facilmente danificado por esses minificadores se usarmos alguns hacks css dentro do código css. Barras invertidas e símbolos estranhos podem enlouquecer o compressor.
Junior Mayhé 12/08/2012

Você pode experimentar o serviço on-line zbugs.com - ele usa o compressor yui para reduzir seus arquivos.
TAMIK Soziev

45

Há também uma porta .NET do YUI Compressor que permite: -

  • integrar a minificação / arquivo combinando em eventos pós-compilação do Visual Studio
  • integrar-se em uma compilação TFS (incluindo IC)
  • se você deseja apenas usar as dlls em seu próprio código (por exemplo, minificação instantânea).

ATUALIZAÇÃO 2011: E agora também está disponível via NuGet :)


Estou um pouco confuso. O Compressor YUI foi descontinuado em favor do UglifyJS ( demo ). Faz sentido trabalhar em uma porta .NET?
Martin Vseticka 29/11

Companheiro. Comecei essa porta em 2008 ou mais. Há 6 anos ímpares atrás. Eu também postei esta resposta em '09. Portanto, verifique as datas e obtenha algum contexto antes de fazer perguntas idiotas. Agora, ir para fora e brincar um pouco wee :)
Pure.Krome

Pure.Krome: Eu imploro para diferir. Eu vi o repositório do GitHub e ele tem alguns meses e os commits são deste ano. É por isso que eu pedi. "Companheiro".
Martin Vseticka 29/11

: aplauso lento: bem avistado! você está realmente certo --- oh. Esperar. Comecei o projeto no codeplex: yuicompressor.codeplex.com . Confirme primeiro em 7 de julho de 2008 ( yuicompressor.codeplex.com/SourceControl/changeset/… ). Em seguida, mudou-se para GH este ano . Eu não fiz nenhum trabalho de portabilidade por muito tempo. Houve apenas algumas correções estranhas aqui e ali. Assim. Cara. Eu portar ED- lo. Não portando . Está no modo de manutenção. QED
Pure.Krome

1
Você também :) E felicidades pelo link para o UglifyJS - isso foi algo que eu queria verificar para ver se podemos usá-lo no trabalho - e você acabou de nos lembrar disso! cheers :)
Pure.Krome

19

Eu gosto do Minify . Em PHP e funciona com CSS ou JavaScript.


2
+1 para Minify. Se você já conhece o PHP, pode se sentir mais confortável em instalá-lo. Requer PHP5. Depois de configurá-lo, você pode esquecê-lo, trabalhe normalmente em tantos arquivos css ou js com espaço em branco e comentados quanto desejar e o minify irá compactá-los rapidamente.
Mahalie

13

Atualmente, o CSSO é o melhor minificador / otimizador.


2
Não sei "o melhor", mas vale a pena dar uma olhada.
Paul D. Waite

Apenas tente e você descobrirá que é o melhor. Não há análogos para suas técnicas de minificação neste momento, como eu sei.
silencioso

1
Tudo bem, eu comparei o CSSO ao YUI Compressor em um arquivo de teste de 30 KB e depois de compactar a saída compactada de ambas as ferramentas, o CSSO vence, tendo compactado o arquivo por 7 bytes extras. Esse é apenas um arquivo de teste, é claro.
Paul D. Waite

reduzir CSS online com CSSO: css.github.io/csso/csso.html
tomByrer

Pelo menos, é um dos dois recomendados pelo Google PageSpeed ​​Insights .
Alex Vang

8

Se você usa o Python, eu recomendaria o mais fino, que provavelmente não é tão rápido quanto o YUI Compressor, mas ao contrário do csscompressor.net, ele não engasga com hacks CSS.

Sou tendencioso desde que escrevi mais fino e atualmente estou avaliando o YUI Compressor para ver como ele lida com hacks. Um exemplo de ação mais enxuta pode ser visto se você visualizar a fonte de crosstips.org



6

Se você está procurando uma ferramenta online, tente o seguinte: https://csscompressor.net/


1
Eu gostaria de poder votar esta resposta negativamente (já é tarde demais depois que eu a votei). Estou tentando comprimir meu css e isso quebra as coisas. Isso não é nada bom. Aviso a todos que estão por aí, meu palpite é que, a menos que você tenha um css em conformidade com os padrões originais, isso pode acabar com você!
BT

19
Mas você não deveria ter um CSS primitivo e compatível com os padrões?
Chuck Le Butt

2
se você estiver usando o clichê HTML5, não.
precisa

Boa ferramenta. Eu testei html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}e funcionou melhor do que o YUI Compressor (que não eliminou duplicatas para o preenchimento de # test). Ainda assim, ambos falharam em me satisfazer html,body{width:100%;height:100%}body{padding:0}(o que, no meu entender, é equivalente, pois os dois seletores têm a mesma especificidade).
drdaeman

CSS é a única coisa em que hacks ruins são às vezes aceitáveis. Alguns desses hacks usam truques estranhos de comentários que a minificação pode quebrar.
Brandon

4

Eu escrevi um minifier CSS ultra-rápido em C #. O algoritmo não suporta Javascript. Thy this: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx .


Opção de boa aparência. Porém, uma consulta: você disse: “De acordo com a especificação CSS, dois tipos de strings são suportados: aspas simples e aspas duplas. Meu algoritmo deixa a string intacta, mesmo que sejam encontrados caracteres em branco ... Só acho que manter a string não modificada é mais intuitiva e profissional. ” Certamente, qualquer caractere de espaço que não adicione significado deve ser removido, para tornar o arquivo de saída o menor possível. Não é esse o ponto da minificação?
Paul D. Waite

3
Bem, na minha opinião, isso certamente está certo em um caso geral. Mas considero as cordas um caso especial. Cabe ao desenvolvedor do CSS original remover ou não espaços em branco sem sentido das strings. O algoritmo que estou mostrando simplesmente segue a especificação, mantendo a string não modificada.
Kerido

4

Tente folhas de estilo de fechamento .

Além da minificação, ele também suporta linting , inversão de RTL e renomeação de classe .

Também pode adicionar variáveis , funções , condicionais e mixins ao CSS.

Observe também que alguns desses recursos dependem do restante das Ferramentas de fechamento (que são muito poderosas por si só).


como você o usa no windows? perdoe a minha ignorância
user2513846

3

Se você está procurando algo em PHP, aqui está o link: -

Minify sem gordura

Embora faça parte da estrutura PHP sem gordura, também pode ser usado de forma independente.


O Fat Free Framework é GPL e, portanto, presumo que essa parte do código também seja. Apenas um aviso.
CodeReaper

Tem bugs: é uma má ideia.
Brunoais # 8/12

3

Acho que o CSS SuperScrub do isnoop funciona muito bem. Porém, ele só pode manipular links diretos para CSS online: / Você pode contornar isso usando o serviço pastebin preferido para armazenar o código css e fornecendo ao SuperScrub o link bruto.


Eu tentei #test { padding: 1em; width: 10em; } #test { padding: 2em; }e falhou.
drdaeman

@drdaeman Provavelmente porque não sabe o que fazer com valores duplicados / conflitantes para um determinado seletor. Como não mantenho o SuperScrub, não posso dizer quando ou se isso será corrigido.
John Michel



3

Outros mencionaram o YUI Compressor, depois a porta .NET, e adicionarei outro link à cadeia. O StyleManager é um controle de servidor que quebra a porta .NET do YUI Compressor para que você possa usá-lo exatamente como está acostumado a usar o ScriptManager. Ele também inclui vários outros recursos interessantes, como constantes CSS, resolução de til (~) nas suas definições de imagem de fundo, etc. É compacto, bem documentado e eu o usei em todos os meus projetos recentes com / o um problema. Confira - gStyleManager.com


3

Ainda "em beta", mas deve funcionar bastante bem. Eu uso o código por trás dele em todos os projetos: http://claudiu.phpfogapp.com/ Ele é construído em PHP e também hospeda seu arquivo * .css por um período bastante grande, certamente o suficiente para permitir que você teste seu código com o css minificado. (Eu excluiria apenas arquivos CSS antigos se o espaço ficar lotado no servidor).


2

Há um projeto codeplex que será conectado a sites .net que reduzirá e compactará os arquivos CSS e JS. Há também uma comparação entre o Microsoft AJAX Minifier e o YUI Compressor, que mostra a YUI saindo um pouco melhor. Há uma variação extra que combina o Microsoft Minifier e a compactação que drasticamente atrapalham o arquivo.

De qualquer forma, o link é http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )




1

Exemplo c #:

css = css.Replace("\n", "");
css = Regex.Replace(css, @"\s+", " ");
css = Regex.Replace(css, @"\s*:\s*", ":");
css = Regex.Replace(css, @"\s*\,\s*", ",");
css = Regex.Replace(css, @"\s*\{\s*", "{");
css = Regex.Replace(css, @"\s*\}\s*", "}");
css = Regex.Replace(css, @"\s*\;\s*", ";");

1

O zbugs.com será uma boa ferramenta online para você, ele reduzirá seu css em um único clique


Claro, embora eu não ache que haja muitos minifiers que exijam mais de um clique para iniciá-los.
Paul D. Waite

Você certo Paul :) mas este faz muito mais do que apenas apoucar, e todos no único clique
TAMIK Soziev

1

Dê uma olhada no mais recente HTML5BoilerPlate de Paul Irish - ele contém um script de compilação para reduzir todos os seus ativos (incluindo PNG e JPG). Você pode ver um vídeo de demonstração aqui .


2
Certo; embora seu minificador CSS seja o YUI Compressor.
Paul D. Waite
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.