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.



20
Busted. J'ai lu «Comment se faire des amis et influencer les gens». Pas assez près cependant .
Paul D. Waite

17
Vous êtes tous bizarres. Nous sommes intelligents, compétents et curieusement beaux.
Chuck Le Butt


3
+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.


4
Pour ajouter à cela, voici un Makefile qui téléchargera le compresseur YUI, emballera vos fichiers et les réduira. github.com/balupton/jquery-sparkle/blob/…
balupton


@ 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.
Tamik Soziev

45

Il y a aussi un port .NET de YUI Compressor qui vous permet de: -

  • intégrer la combinaison minification / fichier dans les événements post-génération de Visual Studio
  • intégrer dans une build TFS (y compris CI)
  • si vous souhaitez simplement utiliser les dll dans votre propre code (par exemple, la minification à la volée).

MISE À JOUR 2011: Et il est maintenant disponible via NuGet aussi :)


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.


2
+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.


2
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.
Paul D. Waite

réduire CSS en ligne avec CSSO: css.github.io/csso/csso.html
tomByrer

Au moins, c'est l'un des deux recommandés par Google PageSpeed ​​Insights .
Alex Vang

8

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



6

Si vous recherchez un outil en ligne, essayez ceci: https://csscompressor.net/


1
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.
Brandon

4

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 .


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.
Kerido

4

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).


comment l'utilisez-vous sur Windows? pardonne mon ignorance
user2513846

3

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.


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

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


3

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).


2

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 )




1

Exemple 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

zbugs.com sera un bon outil en ligne pour vous, il minimisera votre css en un seul clic


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 .


2
Sûr; son minifieur CSS est cependant YUI Compressor.
Paul D. Waite
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.