Wie automatisieren Javascript Kombination und Minification, in Gruppen von Dateien für verschiedene Webseiten?

9

Nehmen wir an, meine Seitenstruktur ist:

%Vor%

und so weiter. Einige Seiten sind mehr besucht als andere, sagen, dass 3 Seiten 99% aller Seitenaufrufe der Website beitragen.

Ich suche nach einer Lösung für:

i) Kombinieren und minimieren Sie Dateien in Gruppen, die in den Seiten enthalten sein können.

ii) Verfügt über eine Logik zum Zuordnen von Dateinamen der Gruppe zum endgültigen kombinierten Dateinamen.

iii) Enthält einen Minifier wie Google Closure Compiler / YUI-Komprimierung.

Eine Lösung, die ich mir angesehen habe, ist: PHP minimieren

was macht das meiste. Es hat jedoch folgende Nachteile für mich:

i) Ich würde meine statischen kombinierten Dateien auf einem CDN-Server hosten, nicht auf demselben Webserver, der PHP minify hostet, daher funktioniert die PHP-Minify-Logik für Serverdateien nach Gruppenname nicht für mich.

ii) PHP Minify verwendet PHP CGI, um die Skripte zu verarbeiten und zu bedienen, während ich möchte, dass mein minimierter Inhalt direkt vom CDN-Server geliefert wird.

Hat PHP Minify einige Funktionen, um den Gruppennamen einem kombinierten Dateinamen zuzuordnen, den ich auf meiner Webseite verwenden kann, um den CDN-Pfad der kombinierten JS-Datei direkt festzulegen. zB

%Vor%

Statt PHP Minify's PHP-Skript aufzurufen, um Dateien einer Gruppe zu bekommen, ist das eigentlich eine PHP-Seite aufrufen, die dann den Javascript-Inhalt von früher bedient generierte Dateien:

%Vor%

(Ich stimme zu, dass das meiste machbar ist, indem verschiedene Lösungen mit benutzerdefinierten Deployment-Skripten kombiniert und Tools wie zB ANT, FABRIC + YUICompressor / ClosureCompiler vereinheitlicht werden, aber ich suche nach einer gut entwickelten konfigurierbaren Lösung, die ich vielleicht verpasst habe) >     

DhruvPathak 27.04.2012, 08:56
quelle

4 Antworten

3

Aktualisiert, um ein Beispiel für minify anzuzeigen

Mit minify scheint es möglich zu sein. Ich bin mir nicht sicher, ob du das ausprobiert hast, aber es für irgendjemanden, der es brauchen könnte, da draußen zu veröffentlichen.

1) Minify kann eine kombinierte und gezippte Kopie Ihrer Skripte generieren und diese als Cache verwenden, sodass nicht alle Ihre Dateien für immer abgefragt werden müssen. Um dies zu ermöglichen, bearbeiten Sie einfach die Datei config.php mit dem Speicherort des temporären Verzeichnisses

%Vor%

2) Nachdem Sie alle Gruppen in groupsConfig.php hinzugefügt haben, stellen Sie einfach eine Anfrage an jede Gruppe, so dass minify die Ausgabedateien im Cache-Ordner

erzeugt

3) Für jede Gruppe finden Sie 2 Dateien im Temp-Ordner mit dem Namen:

%Vor%

4) Sie können die Dateien umbenennen und sie nach Bedarf direkt auf Ihrem CDN bereitstellen

5) Wenn Ihr CDN das Umschreiben von URLs zulässt, können Sie Ihre Skript-URL neu schreiben, um den JS bereitzustellen, ohne dass Sie den Speicherort auf den von Ihnen bereitgestellten Seiten ändern müssen.

Sofern Sie nicht über eine große Anzahl verschiedener Konfigurationen verfügen, empfehle ich Ihnen, YUICompressor zu verwenden und in Ihrem CDN-Netzwerk bereitzustellen. Es ist eigentlich ziemlich einfach, so etwas mit einem einfachen Shell-Skript zu automatisieren. Wenn Sie jedoch ein wirklich kompliziertes Setup haben, können Sie ein Build-Tool wie grunt in Erwägung ziehen, das darüber läuft node.js. Ich habe Grunt verwendet, um JS-Dateien für verschiedene Projekte mit der gleichen Codebasis zu erstellen, und es funktioniert ganz gut. Zusätzlich werden Flusen und Kompression OOTB unterstützt.

    
Checksum 30.04.2012, 06:22
quelle
1

Meine eigenen Projekte sind sehr ähnlich wie deine; HTML mit sowohl externem als auch internem JavaScript, CSS und Bildern. Auch ich habe mich nach einer fertigen Lösung umgesehen und konnte sie nicht finden, also habe ich meine eigene entwickelt. Hier ist ein heruntergekommenes System, das ich erstellt habe. Wenn Sie diesen Weg gehen, hoffe ich, dass Sie dadurch eine Vorstellung davon bekommen, wonach Sie Ausschau halten sollten.

Das System beginnt mit dem Auschecken einer bestimmten Revision des Projekts, das Sie bereitstellen möchten. Sie müssen eine Übersetzung zwischen den Pfaden im lokalen Dateisystem und den entsprechenden Remotepfaden (z. B. CDN oder Webserver) erstellen. In meinem Fall werden alle Assets aus einem festen Verzeichnis innerhalb des Projekts geladen.

Ich beginne mit der Analyse aller HTML-Templates (ich habe einen MVC, um HTML vom PHP-Code zu trennen); Dies sammelt alle JavaScript-, CSS- und Bildreferenzen:

  • Bildverweise in HTML, JavaScript oder CSS werden durch ihren Speicherort auf dem CDN ersetzt.
  • Internes JavaScript und CSS werden mit Closure Compiler und YUI komprimiert.
  • Fortlaufende externe JavaScript- und CSS-Blöcke werden durch einzelne Bündel von komprimiertem Code / Stil ersetzt; Der Bundle-Name ist ein Hash der Dateinamen und ihrer jeweiligen Version (CDN liefert diese Dateien mit maximalem Ablaufdatum, so dass jede Änderung einen eindeutigen Dateinamen verursachen muss).

Anschließend werden alle Bundles komprimiert, gezippt, gespeichert und zusammen mit allen Bildern zur Vorbereitung der Bereitstellung auf das CDN hochgeladen. PNG-Dateien werden auch "zerkleinert", um ihre Größe zu reduzieren.

Schließlich wird das gesamte Projekt hochgeladen und bereitgestellt (bei mehreren Servern).

Fazit es ist eine Menge Arbeit, aber wenn es läuft, ist es großartig zu sehen, wie es funktioniert:)

    
Ja͢ck 04.05.2012 17:03
quelle
0

Erstellen Sie eine Gruppierungskonfigurationsdatei (xml / php), die die Gruppierungsregeln für die Verwendung in statischem HTML enthält.

%Vor%

Erstellen Sie ein PHP-Skript, das diese Konfiguration liest und PHP minify verwendet, um gruppierte minified js / css-Dateien an dem in der Gruppendefinition angegebenen Pfad zu erstellen.

Verwenden Sie diese Pfade, um gruppierte Dateien in die statischen HTML-Dateien aufzunehmen. Führen Sie das Skript aus, um Ihre Seiten zu testen und die gruppierten Dateien auf dem CDN bereitzustellen.

    
Satish N Ramteare 03.05.2012 15:45
quelle
0

grunt ist großartig. Wenn das nicht funktioniert, versuchen Sie die Kassette: Ссылка

    
robrich 03.05.2012 20:54
quelle