Irgendwelche Empfehlungen für einen CSS-Minifier? [geschlossen]


289

Irgendwelche Empfehlungen für einen CSS-Minifier?

Ich werde mich bei Google umsehen und einige ausprobieren, aber ich vermutete, dass die intelligente, kompetente und merkwürdig gutaussehende StackOverflow-Community die Vor- und Nachteile der Schwergewichte bereits bewertet hat.



20
Gehackt. Ich habe gelesen, wie man Freunde findet und Menschen beeinflusst. Nicht nah genug .
Paul D. Waite

17
Ihr seid alle komisch. Wir sind klug, kompetent und neugierig gutaussehend.
Chuck Le Butt


3
+1 nur um die "sich verändernde Natur" der Dinge hier zu verstehen und um die Gründe für das Schließen solcher Fragen zu verstehen und zu erklären - obwohl es Ihre ist! ;)
Andrew Barber

Antworten:


98

Der YUI Compressor ist fantastisch. Es funktioniert mit JavaScript und CSS. Hör zu.


4
Hinzu kommt ein Makefile, das den YUI-Kompressor herunterlädt, Ihre Dateien packt und sie minimiert. github.com/balupton/jquery-sparkle/blob/…
balupton


@ JuniorMayhé Ich habe es benutzt und meine Stile wurden völlig durcheinander gebracht, obwohl ich "Nur minimieren, keine Symbolverschleierung" aktiviert hatte. Option) ... leider bricht jeder Minifier, den ich versuche, immer meine Stile. Liegt es daran, dass Online-Minifahrer alles Mist sind? Das sollte nicht so sein.
Dialex

1
@DiAlex Ich verstehe, dass viele von ihnen unseren Code durcheinander bringen. Wir müssen sie sorgfältig verwenden und immer einen "konservativen" Ansatz wählen und nicht das aggressive Re-Factoring. Ein Konservativer würde nur unnötige Leerzeichen, nachfolgende Semikolons, doppelte Stile usw. entfernen. Ich denke, ein Stil könnte durch diese Minifier leicht beschädigt werden, wenn wir einige CSS-Hacks im CSS-Code verwenden. Backslashes und seltsame Symbole könnten den Kompressor verrückt machen.
Junior Mayhé

Sie können den Onlinedienst zbugs.com ausprobieren - er verwendet den yui-Kompressor, um Ihre Dateien zu minimieren.
Tamik Soziev

45

Es gibt auch einen .NET-Port von YUI Compressor , mit dem Sie: -

  • Integrieren Sie die Minimierung / Datei in Visual Studio-Ereignisse nach dem Erstellen
  • Integration in einen TFS-Build (einschließlich CI)
  • wenn Sie nur die DLLs in Ihrem eigenen Code verwenden möchten (z. B. On-the-Fly-Minimierung).

UPDATE 2011: Und es ist jetzt auch über NuGet verfügbar :)


Ich bin ein wenig verwirrt. YUI Compressor ist zugunsten von UglifyJS ( Demo ) veraltet . Ist es sinnvoll, an einem .NET-Port zu arbeiten?
Martin Vseticka

Kamerad. Ich habe diesen Hafen ungefähr 2008 gestartet. Das ist 6 ungerade Jahre her. Ich habe diese Antwort auch in '09 gepostet. Bitte überprüfen Sie die Daten und erhalten Sie einen Kontext, bevor Sie nach dummen Fragen fragen. Jetzt geh
raus

Pure.Krome: Ich bin anderer Meinung. Ich habe mir das GitHub-Repo angesehen und es ist ein paar Monate alt und die Commits stammen aus diesem Jahr. Darum habe ich gefragt. "Kamerad".
Martin Vseticka

: langsames Klatschen: gut entdeckt! Du bist wirklich richtig --- oh. Warten. Ich habe das Projekt auf Codeplex gestartet: yuicompressor.codeplex.com . Erstes Commit am 7. Juli 2008 ( yuicompressor.codeplex.com/SourceControl/changeset/… ). Dann zog es dieses Jahr zu GH . Ich habe lange nicht daran gearbeitet, es zu portieren. Hier und da gab es nur ein paar seltsame Fehlerbehebungen. So. Kumpel. Ich portiere ED es. Nicht Port ing es. Es ist im Wartungsmodus. QED
Pure.Krome

1
Sie auch :) Und Prost auf den Link zu UglifyJS - das war etwas, das ich überprüfen wollte, um zu sehen, ob wir es bei der Arbeit verwenden können - und Sie haben uns gerade daran erinnert!
Prost

19

Ich mag Minify . In PHP und arbeitet mit CSS oder JavaScript.


2
+1 für Minimieren. Wenn Sie bereits mit PHP vertraut sind, können Sie es bequemer installieren. Benötigt PHP5. Sobald Sie es eingerichtet haben, können Sie es vergessen. Arbeiten Sie wie gewohnt an so vielen CSS- oder JS-Dateien mit super weißen Abständen und Kommentaren, wie Sie möchten, und minimieren Sie sie, um sie im laufenden Betrieb zu komprimieren.
Mahalie

13

CSSO ist derzeit der beste Minifier / Optimierer.


2
Keine Ahnung von "den Besten", aber einen Blick wert.
Paul D. Waite

Probieren Sie es einfach aus und Sie werden feststellen, dass es das Beste ist. Wie ich weiß, gibt es für diesen Moment keine Analoga für seine Minifizierungstechniken.
still

1
In Ordnung, ich habe CSSO mit YUI Compressor in einer 30-KB-Testdatei verglichen, und nachdem die komprimierte Ausgabe beider Tools komprimiert wurde, gewinnt CSSO, nachdem die Datei um zusätzliche 7 Byte komprimiert wurde. Das ist natürlich nur eine Testdatei.
Paul D. Waite

Reduzieren Sie CSS online mit CSSO: css.github.io/csso/csso.html
tomByrer

Zumindest ist es eines der beiden von Google PageSpeed ​​Insights empfohlenen .
Alex Vang

8

Wenn Sie Python verwenden, würde ich schlanker empfehlen , die wahrscheinlich auf CSS - Hacks es nicht so schnell wie YUI Compressor aber im Gegensatz zu csscompressor.net ist Choke nicht.

Ich bin voreingenommen, seit ich schlanker geschrieben habe, und evaluiere derzeit YUI Compressor, um zu sehen, wie es mit Hacks umgeht. Ein Beispiel für eine schlankere Aktion ist zu sehen, wenn Sie die Quelle von crosstips.org anzeigen



6

Wenn Sie nach einem Online-Tool suchen, versuchen Sie Folgendes: https://csscompressor.net/


1
Ich wünschte, ich könnte diese Antwort ablehnen (es ist bereits zu spät, nachdem ich sie positiv bewertet habe). Ich versuche mein CSS zu komprimieren und es bricht Dinge. Das ist überhaupt nicht gut. Ich vermute an alle da draußen, ich vermute, dass es Ihre Scheiße brechen könnte, wenn Sie keine makellosen CSS-konformen Standards haben!
BT

19
Aber sollten Sie nicht makelloses, standardkonformes CSS haben?
Chuck Le Butt

2
Wenn Sie HTML5 Boilerplate verwenden, nein.
SkaveRat

Schönes Werkzeug. Ich habe es getestet html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}und es hat bessere Arbeit geleistet als YUI Compressor (wodurch keine Duplikate für das Auffüllen von # test beseitigt wurden). Trotzdem konnten mich beide nicht zufrieden stellen html,body{width:100%;height:100%}body{padding:0}(was nach meinem Verständnis gleichwertig ist, da beide Selektoren die gleiche Spezifität haben).
Drdaeman

CSS ist die einzige Sache, bei der beschissene Hacks manchmal akzeptabel sind. Einige dieser Hacks verwenden seltsame Kommentartricks, die die Minifiction brechen kann.
Brandon

4

Ich habe einen ultraschnellen CSS-Minifier in C # geschrieben. Der Algorithmus verarbeitet jedoch kein Javascript. Thy this: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx .


Gut aussehende Option. Eine Abfrage: Sie sagten: „Gemäß der CSS-Spezifikation werden zwei Arten von Zeichenfolgen unterstützt: einfache und doppelte Anführungszeichen. Mein Algorithmus lässt die Zeichenfolge intakt, auch wenn darin Leerzeichen enthalten sind. Ich denke nur, dass es intuitiver und professioneller ist, die Zeichenfolge unverändert zu lassen. “ Sicherlich sollten Leerzeichen, die keine Bedeutung hinzufügen, entfernt werden, um die Ausgabedatei so klein wie möglich zu machen. Ist das nicht der Punkt der Minimierung?
Paul D. Waite

3
Nun, meiner Meinung nach ist dies in einem allgemeinen Fall sicherlich richtig. Aber ich halte Saiten für einen Sonderfall. Es ist Sache des Entwicklers des ursprünglichen CSS, bedeutungslose Leerzeichen aus Zeichenfolgen zu entfernen. Der Algorithmus, den ich zeige, folgt einfach der Spezifikation und lässt die Zeichenfolge unverändert.
Kerido

4

Versuchen Sie es mit Closure-Stylesheets .

Neben der Minimierung werden auch Flusen , RTL-Spiegeln und Umbenennen von Klassen unterstützt .

Es können auch Variablen , Funktionen , Bedingungen und Mixins hinzugefügt werden zu CSS .

Beachten Sie auch, dass einige dieser Funktionen von den übrigen Schließwerkzeugen abhängen (die für sich genommen sehr leistungsfähig sind).


Wie benutzt man es unter Windows? vergib mir meine Unwissenheit
user2513846

3

Wenn Sie nach etwas in PHP suchen, ist hier der Link: -

Fettfrei minimieren

Obwohl es Teil des PHP Fat-Free Framework ist, kann es auch eigenständig verwendet werden.


Das Fat Free Framework ist GPL und daher gehe ich davon aus, dass dieser Teil ihres Codes auch so ist. Nur ein Kopf hoch.
CodeReaper

Es hat Fehler: S schlechte Idee.
Brunoais

3

Ich finde, dass isnoops CSS SuperScrub sehr gut funktioniert. Es kann jedoch nur direkte Links zu CSS online verarbeiten: / Sie können dies jedoch umgehen, indem Sie Ihren bevorzugten Pastebin-Dienst verwenden, um den CSS-Code zu speichern, und SuperScrub nur den unformatierten Link geben.


Ich habe es anprobiert #test { padding: 1em; width: 10em; } #test { padding: 2em; }und es ist fehlgeschlagen.
Drdaeman

@drdaeman Das liegt wahrscheinlich daran, dass es nicht weiß, was mit widersprüchlichen / doppelten Werten für einen bestimmten Selektor zu tun ist. Da ich SuperScrub nicht pflege, kann ich Ihnen nicht sagen, wann oder ob dies behoben wird.
John Michel



3

Andere haben YUI Compressor und dann den .NET-Port erwähnt, und ich werde der Kette ein weiteres Glied hinzufügen. StyleManager ist ein Serversteuerelement, das den .NET-Port von YUI Compressor einschließt, sodass Sie ihn genauso verwenden können, wie Sie es von ScriptManager gewohnt sind. Es fügt auch eine Reihe anderer netter Funktionen hinzu, wie CSS-Konstanten, Tilde (~) -Auflösung mit Ihren Hintergrundbilddefinitionen usw. usw. Es ist eng, gut dokumentiert und ich habe es für alle meine letzten Projekte mit verwendet o ein Problem. Probieren Sie es aus - gStyleManager.com


3

Immer noch "in der Beta", sollte aber ziemlich gut funktionieren. Ich verwende den Code dahinter in jedem Projekt: http://claudiu.phpfogapp.com/ Er ist in PHP integriert und hostet auch Ihre * .css-Datei für eine ziemlich lange Zeit, sicherlich genug, um Ihren Code mit dem zu testen minimiertes CSS. (Ich würde alte CSS-Dateien nur löschen, wenn der Speicherplatz auf dem Server überfüllt ist).


2

Es gibt ein Codeplex-Projekt, das sich in .net-Websites einbindet und die CSS- und JS-Dateien minimiert und komprimiert. Es gibt auch einen Vergleich zwischen dem Microsoft AJAX Minifier und dem YUI Compressor, der zeigt, dass die YUI etwas besser herauskommt. Es gibt eine zusätzliche Variante, die den Microsoft Minifier und die Komprimierung kombiniert, wodurch die Datei drastisch zerstört wird.

Auf jeden Fall lautet der Link http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )




1

C # Beispiel:

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 ist ein gutes Online-Tool für Sie. Es minimiert Ihr CSS mit einem einzigen Klick


Sicher, obwohl ich nicht glaube, dass es viele Minifahrer gibt, die mehr als einen Klick benötigen, um sie zu starten.
Paul D. Waite

Sie haben Recht, Paul :), aber dieser macht viel mehr als nur zu minimieren und alles mit einem Klick
Tamik Soziev

1

Werfen Sie einen Blick auf die neueste HTML5BoilerPlate von Paul Irish - sie enthält ein Build-Skript, mit dem Sie alle Ihre Assets (einschließlich PNGs und JPGs) minimieren können. Hier können Sie ein Demo-Video sehen .


2
Sicher; Der CSS-Minifier ist jedoch YUI Compressor.
Paul D. Waite
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.