Des recommandations pour un minifieur CSS? [fermé]
289
Des recommandations pour un minifieur CSS?
Je vais enraciner autour de Google et en essayer, mais je soupçonnais que la communauté StackOverflow intelligente, compétente et curieusement belle aurait déjà évalué les avantages et les inconvénients des poids lourds.
+1 juste pour comprendre la «nature changeante» des choses ici, et comprendre et expliquer le raisonnement pour clore des questions comme celle-ci - même si c'est la vôtre! ;)
Andrew Barber
Réponses:
98
Le compresseur YUI est fantastique. Il fonctionne sur JavaScript et CSS. Vérifiez-le.
@ JuniorMayhé Je l'ai utilisé et mes styles ont été complètement gâchés même si j'avais coché "Minify uniquement, pas d'obscurcissement de symbole". option) ... malheureusement, chaque minifier que j'essaie rompt toujours mes styles. Est-ce parce que les minificateurs en ligne sont tous des conneries? Il ne devrait pas en être ainsi.
dialex
1
@DiAlex Je comprends que beaucoup d'entre eux gâchent notre code, nous devons les utiliser avec soin, en choisissant toujours une approche "conservatrice" et non la refactorisation agressive. Un conservateur ne ferait que supprimer les espaces inutiles, les points-virgules de fin, les styles en double, etc. Je pense qu'un style pourrait être facilement endommagé par ces minificateurs si nous utilisons des hacks CSS dans le code CSS. Les contre-obliques et les symboles étranges peuvent rendre le compresseur fou.
Junior Mayhé
Vous pouvez essayer le service en ligne zbugs.com - il utilise le compresseur yui pour réduire vos fichiers.
Je suis un peu confus. YUI Compressor est déconseillé au profit de UglifyJS ( démo ). Est-il judicieux de travailler sur un port .NET?
Martin Vseticka
Camarade. J'ai commencé ce port en 2008 environ. Cela fait 6 années impaires. J'ai également posté cette réponse en '09. Veuillez donc vérifier les dates et obtenir un peu de contexte avant de poser des questions idiotes. Maintenant, allez dehors et jouez un tout petit peu :)
Pure.Krome
Pure.Krome: Je vous prie de différer. J'ai regardé le repo GitHub et il a quelques mois et les commits datent de cette année. C'est pourquoi j'ai demandé. "Camarade".
Martin Vseticka
: clap lent: bien repéré! vous êtes en fait juste --- oh. Attendre. J'ai commencé le projet sur codeplex: yuicompressor.codeplex.com . Premier commit le 7 juillet 2008 ( yuicompressor.codeplex.com/SourceControl/changeset/… ). Ensuite, je l'ai déplacé vers GH cette année . Je n'ai fait aucun travail sur le portage pendant une longue période. Il n'y a eu que quelques corrections de bugs étranges ici et là. Alors. Mec. Je le porte ED . Pas le port ing il. C'est en mode maintenance. QED
Pure.Krome
1
Vous aussi :) Et merci pour le lien vers UglifyJS - c'est quelque chose que je voulais vérifier pour voir si nous pouvons l'utiliser au travail - et vous venez de nous le rappeler! à votre santé :)
Pure.Krome
19
J'aime Minify . En PHP et fonctionne avec CSS ou JavaScript.
+1 pour Minify. Si vous connaissez déjà PHP, vous pouvez être plus à l'aise de l'installer. Nécessite PHP5. Une fois que vous l'avez configuré, vous pouvez l'oublier, travailler comme d'habitude sur autant de fichiers CSS ou JS super espacés que vous le souhaitez et Minify les compressera à la volée.
mahalie
13
CSSO est actuellement le meilleur minificateur / optimiseur.
Je ne sais pas «le meilleur», mais ça vaut le coup d'oeil.
Paul D. Waite
Essayez-le et vous verrez que c'est le meilleur. Il n'y a pas d'analogues pour ses techniques de minification pour le moment comme je le sais.
silencieux
1
bien, j'ai comparé CSSO à YUI Compressor sur un fichier de test de 30 Ko, et après avoir compressé la sortie compressée des deux outils, CSSO gagne, après avoir compressé le fichier de 7 octets supplémentaires. Bien sûr, ce n'est qu'un fichier de test.
Si vous utilisez Python, je recommanderais plus mince ce qui n'est probablement pas aussi rapide que YUI Compressor, mais contrairement à csscompressor.net, il ne s'étouffe pas avec les hacks CSS.
Je suis biaisé depuis que j'ai écrit plus mince et j'évalue actuellement YUI Compressor pour voir comment il gère les hacks. Un exemple de plus mince en action peut être vu si vous affichez la source de crosstips.org
J'aimerais pouvoir voter contre cette réponse (c'est déjà trop tard après l'avoir votée). J'essaie de compresser mon CSS et ça casse les choses. Ce n'est pas bon du tout. Attention à tout le monde là-bas, je suppose que si vous n'avez pas de CSS conformes aux normes, cela pourrait vous casser la merde!
BT
19
Mais, ne devriez- vous pas avoir un CSS vierge et conforme aux normes?
Chuck Le Butt
2
si vous utilisez un passe-partout HTML5, non.
SkaveRat
Bel outil. Je l'ai testé html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}et il a mieux fonctionné que YUI Compressor (qui n'a pas éliminé les doublons pour le remplissage de # test). Pourtant, les deux n'ont pas réussi à me satisfaire html,body{width:100%;height:100%}body{padding:0}(ce qui, à mon avis, est équivalent, car les deux sélecteurs ont la même spécificité).
drdaeman
CSS est la seule chose où les hacks de merde sont parfois acceptables. Certains de ces hacks utilisent des astuces de commentaires étranges que la minifiction peut casser.
Belle option. Une question cependant: vous avez dit: «Selon la spécification CSS, deux types de chaînes sont pris en charge: les guillemets simples et les guillemets doubles. Mon algorithme laisse la chaîne intacte, même si des espaces sont trouvés à l'intérieur ... Je pense simplement que garder la chaîne non modifiée est plus intuitif et professionnel. " Sûrement tous les caractères d'espace qui n'ajoutent pas de sens devraient être supprimés, pour rendre le fichier de sortie aussi petit que possible? N'est-ce pas là le point de minification?
Paul D. Waite
3
Eh bien, à mon avis, c'est certainement vrai dans un cas général. Mais je considère les cordes comme un cas particulier. Il appartient au développeur du CSS d'origine de supprimer ou non les espaces vides de sens des chaînes. L'algorithme que je montre suit simplement la spécification en gardant la chaîne non modifiée.
Le Fat Free Framework est GPL et donc je suppose que cette partie de leur code l'est aussi. Juste un coup de tête.
CodeReaper
Il a des bugs: S mauvaise idée.
brunoais
3
Je trouve que le CSS SuperScrub d'isnoop fonctionne très bien. Cependant, il ne peut gérer que les liens directs vers CSS en ligne: / Vous pouvez contourner cela en utilisant votre service pastebin préféré pour conserver le code CSS et en donnant simplement à SuperScrub le lien brut.
Je l'ai essayé #test { padding: 1em; width: 10em; } #test { padding: 2em; }et il a échoué.
drdaeman
@drdaeman C'est probablement parce qu'il ne sait pas quoi faire avec les valeurs en conflit / en double pour un sélecteur donné. Comme je ne gère pas SuperScrub, je ne peux pas vous dire quand ni si cela sera corrigé.
John Michel
3
Si votre site est en ASP.NET, vous pouvez laisser votre site effectuer la minification CSS à la volée (vous n'avez donc pas à le faire manuellement chaque fois que vous apportez une modification). Par exemple avec ceci:
D'autres ont mentionné YUI Compressor, puis le port .NET de celui-ci, et j'ajouterai un autre lien à la chaîne. StyleManager est un contrôle serveur qui enveloppe le port .NET de YUI Compressor afin que vous puissiez l'utiliser comme vous avez l'habitude d'utiliser ScriptManager. Il ajoute également un tas d'autres fonctionnalités intéressantes, comme les constantes CSS, la résolution tilde (~) avec vos définitions d'image d'arrière-plan, etc. o un problème. Découvrez-le - gStyleManager.com
Toujours "en version bêta", mais devrait fonctionner assez bien. J'utilise le code derrière dans chaque projet: http://claudiu.phpfogapp.com/ Il est construit en PHP et héberge également votre fichier * .css pendant une assez longue période, sûrement assez pour vous permettre de tester votre code avec le css minifié. (Je ne supprimerais les anciens fichiers CSS que si l'espace est saturé sur le serveur).
Il existe un projet codeplex qui se connectera aux sites Web .net qui réduiront et compresseront les fichiers CSS et JS. Il existe également une comparaison entre le Microsoft AJAX Minifier et le compresseur YUI qui montre que le YUI sort légèrement mieux. Il existe une variante supplémentaire qui combine Microsoft Minifier et la compression qui a considérablement réduit le fichier.
Bien sûr, bien que je ne pense pas qu'il existe de nombreux minificateurs qui nécessitent plus d'un clic pour les démarrer.
Paul D. Waite
Vous avez raison Paul :) mais celui-ci fait beaucoup plus que simplement minifier, et tout en un seul clic
Tamik Soziev
1
Jetez un coup d'œil à la dernière HTML5BoilerPlate de Paul Irish - elle contient un script de construction pour réduire tous vos actifs (y compris les PNG et JPG). Vous pouvez voir une vidéo de démonstration ici .
Réponses:
Le compresseur YUI est fantastique. Il fonctionne sur JavaScript et CSS. Vérifiez-le.
la source
Il y a aussi un port .NET de YUI Compressor qui vous permet de: -
MISE À JOUR 2011: Et il est maintenant disponible via NuGet aussi :)
la source
J'aime Minify . En PHP et fonctionne avec CSS ou JavaScript.
la source
CSSO est actuellement le meilleur minificateur / optimiseur.
la source
Si vous utilisez Python, je recommanderais plus mince ce qui n'est probablement pas aussi rapide que YUI Compressor, mais contrairement à csscompressor.net, il ne s'étouffe pas avec les hacks CSS.
Je suis biaisé depuis que j'ai écrit plus mince et j'évalue actuellement YUI Compressor pour voir comment il gère les hacks. Un exemple de plus mince en action peut être vu si vous affichez la source de crosstips.org
la source
Découvrez CSSTidy: http://csstidy.sourceforge.net/usage.php
Et en ligne sur: http://cdburnerxp.se/cssparse/css_optimiser.php
la source
Si vous recherchez un outil en ligne, essayez ceci: https://csscompressor.net/
la source
html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}
et il a mieux fonctionné que YUI Compressor (qui n'a pas éliminé les doublons pour le remplissage de # test). Pourtant, les deux n'ont pas réussi à me satisfairehtml,body{width:100%;height:100%}body{padding:0}
(ce qui, à mon avis, est équivalent, car les deux sélecteurs ont la même spécificité).J'ai écrit un minifieur CSS ultra rapide en C #. Cependant, l'algorithme ne gère pas Javascript. Thy ceci: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx .
la source
Essayez les feuilles de style de fermeture .
Outre la minification, il prend également en charge le linting , le retournement RTL et le changement de nom de classe .
Il peut également ajouter des variables , des fonctions , des conditions et des mixins à CSS.
Notez également que certaines de ces fonctionnalités dépendent du reste des outils de fermeture (qui sont très puissants par eux-mêmes).
la source
Si vous cherchez quelque chose en PHP, voici le lien: -
Minify sans gras
Bien qu'il fasse partie du framework PHP sans gras, il peut également être utilisé de manière autonome.
la source
Je trouve que le CSS SuperScrub d'isnoop fonctionne très bien. Cependant, il ne peut gérer que les liens directs vers CSS en ligne: / Vous pouvez contourner cela en utilisant votre service pastebin préféré pour conserver le code CSS et en donnant simplement à SuperScrub le lien brut.
la source
#test { padding: 1em; width: 10em; } #test { padding: 2em; }
et il a échoué.Si votre site est en ASP.NET, vous pouvez laisser votre site effectuer la minification CSS à la volée (vous n'avez donc pas à le faire manuellement chaque fois que vous apportez une modification). Par exemple avec ceci:
http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx
la source
Perl a CSS :: Minifier (et une version XS pour une vitesse supplémentaire).
la source
D'autres ont mentionné YUI Compressor, puis le port .NET de celui-ci, et j'ajouterai un autre lien à la chaîne. StyleManager est un contrôle serveur qui enveloppe le port .NET de YUI Compressor afin que vous puissiez l'utiliser comme vous avez l'habitude d'utiliser ScriptManager. Il ajoute également un tas d'autres fonctionnalités intéressantes, comme les constantes CSS, la résolution tilde (~) avec vos définitions d'image d'arrière-plan, etc. o un problème. Découvrez-le - gStyleManager.com
la source
Toujours "en version bêta", mais devrait fonctionner assez bien. J'utilise le code derrière dans chaque projet: http://claudiu.phpfogapp.com/ Il est construit en PHP et héberge également votre fichier * .css pendant une assez longue période, sûrement assez pour vous permettre de tester votre code avec le css minifié. (Je ne supprimerais les anciens fichiers CSS que si l'espace est saturé sur le serveur).
la source
Il existe un projet codeplex qui se connectera aux sites Web .net qui réduiront et compresseront les fichiers CSS et JS. Il existe également une comparaison entre le Microsoft AJAX Minifier et le compresseur YUI qui montre que le YUI sort légèrement mieux. Il existe une variante supplémentaire qui combine Microsoft Minifier et la compression qui a considérablement réduit le fichier.
Quoi qu'il en soit, le lien est http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )
la source
Voici comment je l'ai fait pour MVC3: http://mkramar.blogspot.com/2011/08/css-and-javascript-minify-and-combine.html La beauté de cette approche est qu'elle fait tout à la volée et vous n'avez pas à pré-traiter les fichiers manuellement ni à configurer la post-génération.
la source
Un outil en ligne (bien meilleur que www.csscompressor.net qui a augmenté mon CSS): http://www.cssdrive.com/compressor/compress.php fait un excellent travail.
la source
Exemple C #:
la source
zbugs.com sera un bon outil en ligne pour vous, il minimisera votre css en un seul clic
la source
Jetez un coup d'œil à la dernière HTML5BoilerPlate de Paul Irish - elle contient un script de construction pour réduire tous vos actifs (y compris les PNG et JPG). Vous pouvez voir une vidéo de démonstration ici .
la source