Was soll ich verwenden, um CSS / JS-Dateien automatisch zu kombinieren?

Ich kenne Kettenräder zum Kombinieren von Javascript-Dateien, habe es aber nicht ausprobiert. Welche anderen Optionen gibt es und wie stapeln sie sich?

Ich habe einen Handler für Asp.Net geschrieben, der YUI zum Komprimieren, Verketten und Zwischenspeichern der Ausgabe verwendet.

Hier ist die Quelle: http://gist.github.com/130913

Ich habe dieses Problem bereits in einer anderen Frage angesprochen

Im Nachhinein hätte ich es auf Webmasters anstatt auf der Programmerseite nachfragen sollen.

Sie haben 3 Möglichkeiten:

1. Lassen Sie Ihr Framework automatisch damit umgehen
2. Lassen Sie Ihren Webserver automatisch damit umgehen
3. Rollen Sie Ihre eigene Option, um es manuell zu tun

Option 1 (mit einer CakePHP-Erweiterung):

Laden Sie AssetPacker herunter und installieren Sie es auf Ihrer Site (für die auch jsmin und CSSTidy erforderlich sind). Ändern Sie einige Quelltextzeilen, die die js-Dateien enthalten. Waschen-> Spülen-> Wiederholen. Voila, der Rest erledigt sich automatisch für Sie.

Wenn Sie ein anderes Framework verwenden, gibt es wahrscheinlich ein Tool, das dies für Sie erledigt. Es ist eine ziemlich häufige Anforderung in der Webdev-Welt.

Option 2 (mit einem Apache-Mod):

Schauen Sie sich den Google Pagespeed-Mod für Apache an . Es macht alles, was Sie beschreiben und vieles mehr.

Stellen Sie jedoch sicher, dass Sie die Ressourcen Ihres Produktionsservers überwachen. Einige Leute haben Probleme festgestellt, bei denen dies die Auslastung ihres Servers in einer schlechten Weise erhöht. Ich bin mir nicht sicher, aber möglicherweise ist eine ausreichende Strategie für statische Inhalte erforderlich, um eine effektive Option zu sein.

Option 3:

Wenn Sie wirklich wollen, können Sie PHP-Magie erstellen, die die JS-Dateiserverseite verkettet und alle Verknüpfungsrelationen zu einer zusammenfasst, aber ... Genau das tun die beiden Strategien ohnehin schon.

Persönlich würde ich von dieser Option dringend abraten.

Soweit ich weiß, verkettet Sprockets JS-Dateien genauso wie AssetPacker, wird jedoch nur als Ruby Gem implementiert. Was es nicht tut, ist den js-Code zu verkleinern. Wenn Sie es also verwenden, ist es wahrscheinlich eine gute Idee, sich auch das Juwel jsmin zu schnappen. Informationen zur Verwendung von Sprockets + JSMin in CakePHP finden Sie hier .

Ich weiß, dass ich mich auf CakePHP konzentriere, aber ... Ich gehe davon aus, dass es trivial sein sollte, ein Plugin auch an ein anderes Framework anzupassen, wenn es an CakePHP angepasst werden kann.

Bei einer schnellen Google-Suche werden die CSS-Dateien folgendermaßen kombiniert: http://www.tothepc.com/archives/combine-merge-multiple-css-files/

Sind Sie sicher, dass Sie sie kombinieren möchten? Wenn Sie eine gemeinsame Bibliothek verwenden, können Sie einen CDN nutzen, um Ihre Javaskripte bereitzustellen. Sie können dann das Browser-Caching (vorausgesetzt, andere Websites verwenden dasselbe CDN) und die verteilte Zustellung nutzen. Microsoft und Google haben jeweils Lösungen (ich habe sie auch nicht ehrlich verwendet, aber ich werde auf jeden Fall anfangen), und es kann auch andere geben.

Für ASP.NET-Projekte habe ich es gemäß den Anweisungen von Karl Seguin zu einem Teil meines Erstellungsprozesses gemacht .

Karl beschreibt es am besten in seinem Blog, aber die Kurzversion besteht darin, eine Konsolen-App einzurichten, die YUICompressor umhüllt. Anschließend können Sie eine Post-Build-Task einrichten, um diese Konsolen-App anhand des Speicherorts der JS-Dateien auf Ihrer Site aufzurufen.

Wenn Sie eine PHP-Webanwendung verwenden, sollten Sie die Verwendung von minify in Betracht ziehen :

Es kombiniert mehrere CSS- oder Javascript-Dateien, entfernt unnötige Leerzeichen und Kommentare und versorgt sie mit gzip-Codierung und optimalen clientseitigen Cache-Headern.

Zu diesem Zweck könnte es hilfreich sein, Python zu kennen. Sie können Python ziemlich schnell lernen. Ich habe vor ungefähr 2 Wochen angefangen und meine erste Bewerbung (die noch nicht abgeschlossen ist) wird genau das tun, was Sie wollen. Wie der DotLess-Compiler verfügt er über eine Überwachungsfunktion, die nach Dateien oder Verzeichnissen sucht und bei Änderungen eine neue Datei generiert.

Python eignet sich auch hervorragend für andere Wartungsaufgaben, und ich lese, dass viele Systemadministratoren es gerne verwenden.

Ich habe Minifpy erstellt : ein in Python3 geschriebenes Tool (Mac OS, Windows und Linux kompatibel) zum Zusammenführen und Minimieren von JS- und CSS-Dateien mithilfe von Python.

Minifpy verwendet eine sehr einfache JSON-Konfigurationsdatei, um zu definieren, welche Dateien zusammengeführt, verkleinert oder nicht:

{
    "js": {
        "minify_files": [
            {"from": "static/file.js", "to":"static/file.min.js"},
        ],
        "merge_files": [
            {"from" : ["static/file1.js", "static/file2.js"], "to":"static/public.js", "to_min": "static/public.min.js"}
        ]
    },
    "css" : {
        "minify_files": [
            {"from": "static/file.css", "to":"static/file.min.css"},
        ],
        "merge_files": [
            {"from" : ["static/file1.css", "static/file2.css"], "to":"static/public.css", "to_min": "static/public.min.css"}
        ]
    }
}

Sie können dieses Tool auch in CLI verwenden.

Minifpy erkennt alle Änderungen an JS / CSS-Dateien und führt sie automatisch zusammen bzw. verkleinert sie (nützlich für die Entwicklung).