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.
+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.
@ 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.
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.
+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.
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.
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
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.
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.
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.
@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
Se o seu site estiver no ASP.NET, você poderá permitir que ele faça a minificação CSS em tempo real (para que você não precise fazê-lo manualmente toda vez que fizer uma alteração). Por exemplo, com isso:
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
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).
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.
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 .
Respostas:
O compressor YUI é fantástico. Funciona em JavaScript e CSS. Confira.
fonte
Há também uma porta .NET do YUI Compressor que permite: -
ATUALIZAÇÃO 2011: E agora também está disponível via NuGet :)
fonte
Eu gosto do Minify . Em PHP e funciona com CSS ou JavaScript.
fonte
Atualmente, o CSSO é o melhor minificador / otimizador.
fonte
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
fonte
Confira CSSTidy: http://csstidy.sourceforge.net/usage.php
E on-line em: http://cdburnerxp.se/cssparse/css_optimiser.php
fonte
Se você está procurando uma ferramenta online, tente o seguinte: https://csscompressor.net/
fonte
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 satisfazerhtml,body{width:100%;height:100%}body{padding:0}
(o que, no meu entender, é equivalente, pois os dois seletores têm a mesma especificidade).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 .
fonte
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ó).
fonte
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.
fonte
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.
fonte
#test { padding: 1em; width: 10em; } #test { padding: 2em; }
e falhou.Se o seu site estiver no ASP.NET, você poderá permitir que ele faça a minificação CSS em tempo real (para que você não precise fazê-lo manualmente toda vez que fizer uma alteração). Por exemplo, com isso:
http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx
fonte
O Perl possui CSS :: Minifier (e uma versão XS para velocidade extra).
fonte
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
fonte
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).
fonte
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 )
fonte
Foi assim que fiz para o MVC3: http://mkramar.blogspot.com/2011/08/css-and-javascript-minify-and-combine.html A beleza dessa abordagem é que ela faz tudo em tempo real e você não precisa pré-processar os arquivos manualmente ou configurar a pós-compilação.
fonte
Uma ferramenta on-line (muito melhor que www.csscompressor.net, que elevou meu CSS): http://www.cssdrive.com/compressor/compress.php faz um excelente trabalho.
fonte
Exemplo c #:
fonte
O zbugs.com será uma boa ferramenta online para você, ele reduzirá seu css em um único clique
fonte
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 .
fonte