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.
+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.
@ 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.
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.
+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.
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.
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
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.
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.
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
Wenn sich Ihre Site in ASP.NET befindet, können Sie Ihre Site die CSS-Minimierung im laufenden Betrieb durchführen lassen (damit Sie dies nicht jedes Mal manuell tun müssen, wenn Sie Änderungen vornehmen). Zum Beispiel damit:
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
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).
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.
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 .
Antworten:
Der YUI Compressor ist fantastisch. Es funktioniert mit JavaScript und CSS. Hör zu.
quelle
Es gibt auch einen .NET-Port von YUI Compressor , mit dem Sie: -
UPDATE 2011: Und es ist jetzt auch über NuGet verfügbar :)
quelle
Ich mag Minify . In PHP und arbeitet mit CSS oder JavaScript.
quelle
CSSO ist derzeit der beste Minifier / Optimierer.
quelle
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
quelle
Schauen Sie sich CSSTidy an: http://csstidy.sourceforge.net/usage.php
Und online unter: http://cdburnerxp.se/cssparse/css_optimiser.php
quelle
Wenn Sie nach einem Online-Tool suchen, versuchen Sie Folgendes: https://csscompressor.net/
quelle
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 stellenhtml,body{width:100%;height:100%}body{padding:0}
(was nach meinem Verständnis gleichwertig ist, da beide Selektoren die gleiche Spezifität haben).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 .
quelle
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).
quelle
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.
quelle
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.
quelle
#test { padding: 1em; width: 10em; } #test { padding: 2em; }
und es ist fehlgeschlagen.Wenn sich Ihre Site in ASP.NET befindet, können Sie Ihre Site die CSS-Minimierung im laufenden Betrieb durchführen lassen (damit Sie dies nicht jedes Mal manuell tun müssen, wenn Sie Änderungen vornehmen). Zum Beispiel damit:
http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx
quelle
Perl hat CSS :: Minifier (und eine XS-Version für zusätzliche Geschwindigkeit).
quelle
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
quelle
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).
quelle
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 )
quelle
So habe ich es für MVC3 gemacht: http://mkramar.blogspot.com/2011/08/css-and-javascript-minify-and-combine.html Das Schöne an diesem Ansatz ist, dass er alles im laufenden Betrieb erledigt und Sie müssen Dateien nicht manuell vorverarbeiten oder nach dem Erstellen konfigurieren.
quelle
Ein Online-Tool (viel besser als www.csscompressor.net, das mein CSS aufgebockt hat): http://www.cssdrive.com/compressor/compress.php leistet hervorragende Arbeit.
quelle
C # Beispiel:
quelle
zbugs.com ist ein gutes Online-Tool für Sie. Es minimiert Ihr CSS mit einem einzigen Klick
quelle
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 .
quelle