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.

Paul D. Waite
quelle
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
2
Siehe auch: stackoverflow.com/q/65491/85414
Mahalie
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.

Kumpel
quelle
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 :)

Pure.Krome
quelle
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.

artlung
quelle
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.

Leise
quelle
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

Peter Bengtsson
quelle
6

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

miguelSantirso
quelle
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 .

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

Andrzej Duś
quelle
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.

bcosca
quelle
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.

John Michel
quelle
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:

http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx

Katz
quelle
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

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

Claudiu
quelle
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 )

Jonathan Stanton
quelle
2

Ein Online-Tool (viel besser als www.csscompressor.net, das mein CSS aufgebockt hat): http://www.cssdrive.com/compressor/compress.php leistet hervorragende Arbeit.

BT
quelle
Hat Fehler. In bestimmten Situationen bricht es perfekt guten js Code
Brunoais
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*", ";");
Marcelo Gondim
quelle
1

zbugs.com ist ein gutes Online-Tool für Sie. Es minimiert Ihr CSS mit einem einzigen Klick

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

Ben Hughes
quelle
2
Sicher; Der CSS-Minifier ist jedoch YUI Compressor.
Paul D. Waite