Javascript und CSS minifizieren in Joomla (System-Plugin JsCssMinifyGhsvs)
Artikel ist obsolet/antiquiert!
Minifiziert JS- und CSS-Files nicht on-the-fly, wenn die Webseite geladen wird, sondern ist ein Helferlein, das man im Joomla-Backend bei Bedarf startet. Man kann beliebig viele Quelldateien eintragen und optional für jede eine komprimierte Ausgabedatei in beliebigem Joomla-Ordner festlegen. Welche der hinterlegten Dateien im aktuellen Lauf minifiziert werden sollen, lässt sich auswählen.
Dieses Projekt wurde eingestellt, weil die verwendeten Online-Services kein ES6-JavaScript unterstützen und das kommende Joomla-4 vornehmlich ES5/ES6 verwenden wird. Für "stinknormales" JavaScript, auch JQuery, verwende ich es aber nach wie vor. Läuft also noch...
2022-06-23: Keine Ahnung, ob es noch läuft, weil sich auch die API-Adressen der verwendeten Online-Services geändert haben. Nicht getestet, da keine Notwendigkeit mehr.
Einleitung
Das hier zum Download angebotene Joomla-Plugin heißt System - JsCssMinifyGhsvs (PLG_SYSTEM_JSCSSMINIFYGHSVS).
Warum ich mir das Plugin geschrieben habe - Was will ich?
- Ich verwende in meinen Joomla-Erweiterungen und -Templates viele eigene JavaScipt-Bibliotheken, meist JQuery-Plugins inklusive CSS, und viele fremde, an denen ich regelmäßig Änderungen vornehme. Die fremden Pakete haben meist minifizierte Dateien dabei, aber Änderungen sind nur in den unminifizierten Versionen praktikabel machbar. Vieles könnte man durch zusätzliches CSS und JS anderweitig überschreiben, allerdings noch mehr Code, der geladen werden müsste.
- Für die JS/CSS-Komprimierung gibt es diverse Tools, allerdings auf Dauer weitaus umständlicher, zeitaufwendiger als nach Editiierung einfach einen Button in der Joomla-Administration zu klicken und die verkleinerten Dateien automatisch im Sammellauf (oder nicht), beliebig benannt in den richtigen Verzeichnissen direkt auf dem Server abzulegen.
- Die zu den Paketen gehörigen Dateien sind über diverse Ordner verteilt, werden von Minifizierern, die Templates oder Plugins oft mitbringen, nicht alle berücksichtigt. Die kostenlose Version des JCH-Plugins minifiziert nur Dateien, die per Joomla-Methoden in den HEAD des Templates geladen werden. Oft will ich ganz bestimmte JS/CSS-Dateien aber am Ende des Templates einbinden, um Pagespeed-Insights-Gemecker, Stichwort "above the fold", wenigstens etwas zu reduzieren. Das ist nebenbei mit Joomla derzeit noch recht mühsam. Das JCH-Plugin bringt zwar eine Einstellung mit, die aber doch recht häufig zu Fehlern führt. Kann das Plugin nix für, braucht jedoch zeitaufwendige Seitenumbauten bis vielleicht störungsfrei klappt.
- Desweiteren reduziert es die serverseitige Ausführungszeit der Seitenladung, wenn möglichst viele Scripte schon von vornherein komprimiert sind, wenn templateseitig und/oder via Plugin noch mal eine Minifizierung abläuft. Gegebenenfalls nur Millisekunden; in Zeiten schwacher Mobilgeräte-Akus zählt jedoch iowede noch so kleine Ladezeitverringerung (Stichwort mistendes Kleinvieh).
- Bei jeder Seite beschäftige ich mich mit anderen Dateien, hier mal mehr, da weniger. Wäre deshalb schön als Nebeneffekt eine zentrale Stelle zu haben, mit allen relevanten Files, rauskopierbaren Pfaden und der Möglichkeit weitere hinzuzufügen, zu sortieren oder einfach mal einen einzelnen Quellpfad zu ändern, um eine andere Arbeitsversion zu testen.
- Die Plugin-Ausführung soll für jeden einzelnen Dateiensatz pro Lauf aktivierbar/deaktivierbar sein. So kann man zum Beispiel mehrere Quelldateien (Source) dem selben Ziel (Target) zuweisen und wechselweise ausprobieren. Wenn Fremdpakete zu aktualisieren sind, ist das recht praktisch bevor man die alte Version endgültig mit den neuen Dateien überschreibt. Oder kann sich sogar die nervige, händische Umkopiererei in overridefähige /media/-Ordner ganz sparen(?)
- Ich will das Rad nicht neu erfinden und verwende deshalb freie Online-Dienste für die Minifizierung. Dadurch bleibt das Joomla-Plugin codeseitig schmal.
- Klar könnte ich auch den vielleicht irgendwo in Joomla verborgenen Minifizierer verwenden, will mich aber auf der Seite des Onlinedienstes verewigen und fand das viel "spannender" so..
Voraussetzungen
- Das Plugin nutzt die Online-Dienste cssminifier.com und javascript-minifier.com von Andy Chilton (chilts.org). Man muss also online sein, Zugriff auf WWW haben, um es verwenden zu können.
- Ausgabe-Verzeichnisse für die minimierten Zieldateien müssen für Joomla beschreibbar sein. Im Joomla-Normalfall ist das gegeben (Stichwort CGI).
- Mit in Joomla aktiviertem FTP, was generell nicht empfohlen ist, sollte das Schreiben der Dateien ebenfalls funktionieren, da JsCssMinifyGhsvs entsprechende Joomla-Methoden verwendet. Getestet habe ich es im FTP-Modus jedoch nicht.
- Es hängt von Ihren Servermöglichkeiten ab, wie viele Dateien Sie in einem einzigen Sammellauf abarbeiten können. Dateien können einzeln deaktiviert werden. Muss man bei Problemen halt einfach weniger Dateien pro Sammellauf aktivieren.
Limitierungen
- Nicht verwechseln! Das Plugin ist gedacht für Entwickler / Programmierer. Es minifiziert NICHT während Webseiten geladen werden!
- Mit 10 bis 20 aktivierten Dateien pro Sammellauf bin ich auf einem "normalen Server" bisher noch nicht auf Probleme gestoßen. Mehr habe ich nicht getestet, weiß also nicht, wo die Grenzen liegen. Entscheidend können die PHP-Einstellungen max_execution_time und memory_limit sein. Zweiteres eher untergeordnet bei wirklich schwachbrüstigen Servern.
- Ich habe bewusst Online-Dienste für die Minifizierung gewählt, um den Plugin-Code schmal zu halten. Wenn ein Service mittendrin schlapp macht, ist das Plugin machtlos und speichert die "kaputte Datei", die der Service zurückliefert. Erlebt habe ich das in vielen Monaten exakt 1x. In anderen Test-Fällen (Unerreichbarkeit, Abbruch Internetverbindung etc.) brach das Plugin rechtzeitig die Arbeit ab.
- Nutzen Sie wenigstens anfänglich die Backup-Einstellungen des Plugins.
Installation, Aktivierung, erstes Speichern, erste Meldung
Nach ganz normaler Installation wie in Joomla üblich, das Plugin öffnen. Man findet es unter dem Namen System - JsCssMinifyGhsvs.
Das Plugin minifiziert nur dann, wenn Sie es im aktivierten Zustand speichern. Einen Startbutton oder ähnlich gibt es nicht. Solange noch keine Dateien eingetragen wurden UND für Minifizierung aktiviert wurden, gibt das aktivierte Plugin beim Speichern einen Hinweis ähnlich diesem aus und macht sonst nichts:
Nach dem ersten Aktivieren und Speichern kann's sein, dass Sie das Plugin ein zweites mal speichern müssen bevor die Meldung zu sehen ist.
Schritt-für-Schritt-Anleitung
Die folgenden Abblidungen können vom Aussehen der aktuellsten Version abweichen.
Machen wir erst mal ein paar Tests, so, dass nichts kaputt gehen kann.
Legen Sie im Joomla-Webspace einen beliebigen Testordner an. Ich nenne meinen jscssghsvs, den ich im JoomlaRoot anlege.
Kopieren Sie eine beliebige JavaScript-Datei hinein sowie eine beliebige CSS-Datei. Diese Testdateien sollten entsprechenden unminifizierten Inhalt haben und nicht nur Kommentare enthalten. Schlimm wäre das nicht, aber das Plugin wird lediglich einen Hinweis ausgeben und keine Mini-Datei schreiben, weil der Online-Dienst eine leere Datei rücklieferte. Nur wenige Kommentararten entfernt der Dienst nämlich nicht.
Tabulator Globale Einstellungen & Hinweise
In diesem Reiter finden Sie einen Button, mit dem Sie sich die wichtigsten Hinweise zur Nutzung anzeigen lassen können sowie Einstellungen zu Backups.
Deaktivieren Sie erst mal gegen die Empfehlung beide Backup-Einstellungen!
Tabulatoren JavaScript, CSS
Wählen sie nun den Tabulator JavaScript.
Feld "Source" (= Quelldatei) und Einstellung "Active (Minify!)" (= Minifizierung aktiv)
Tragen Sie im Feld Quelldatei die oben angelegte JavaScript-Testdatei inklusive Pfad ab dem Joomla-Hauptverzeichnis ein.
Vergessen Sie den einleitenden Slash (= Schrägstrich) nicht!
/jscssghsvs/classes.js
Aktivivieren Sie diese Datei, diesen Job für den nächsten Sammellauf, indem Sie Einstellfeld Minifizierung aktiv auf JA setzen:
Das Plugin prüft NICHT, welche Dateiart ihm übergeben wurde. Wenn Sie im Tabulator CSS eine JS-, LESS-, PHP-Datei etc. eintragen, ist dem Plugin das wurst und es wird es trotzdem zur Minifizierung an den Online-Dienst abschicken. Das wird bewusst so gemacht, da eine LESS-Datei durchaus auch ausschließlich gültiges CSS enthalten könnte.
Deshalb sollten Sie in den Status-Meldungen des Plugins immer auch einen Blick auf die Ausgabe der ersten paar Zeichen der gespeicherten Ziele werfen. Im folgenden Bild 2 Beispiele, bei denen der Online-Service gar nichts mit den gesendeten Dateien anfangen konnte:
Seit Version 2016.03.31 bietet das Plugin zusätzlich die Möglichkeit, die generierte Zieldatei im Browser zu öffnen und zu kontrollieren.
Weiter mit dem Testlauf:
Das Feld Minified Target (= Minifiziertes Ziel) lassen Sie für den ersten Testlauf leer. Keine Sorge! Die Quelldatei (Source) wird nicht überschrieben.
Im Tabulator CSS gehe ich analog vor, trage aber als Quelle die CSS-Testdatei samt Pfad ein.
Auch hier an den führenden Schrägstrich denken!
/jscssghsvs/editorghsvs.css
Feld "Target File Extension Prefix" (= Zieldatei-Erweiterungsprefix)
Ändern Sie noch dieses Feld nur im CSS-Tabulator. Ich habe statt Vorgabewert .min ein .minifiziert eingetragen.
Nachdem Sie die CSS-Datei ebenfalls aktiviert haben, speichern Sie das Plugin, um den ersten Sammellauf zu starten.
Ooops!
Ich hatte vergessen meinen Testordner inklusive der Testdateien auf den Server per FTP in mein Joomla-Rootverzeichnis hochzuladen. Deshalb erhalte ich eine Fehlermeldung Datei nicht gefunden (= File not found) und 0 Dateien minifiziert.
Aaah!
Nachdem ich die Voraussetzungen erfüllt habe und das Plugin erneut speichere, erhalte ich eine Erfolgsmeldung, die neben anderem auch die generierten, verkleinerten Dateien nennt.
/jscssghsvs/classes.min.js
/jscssghsvs/editorghsvs.minifiziert.css
Wir sehen nun auch den Sinn des oben für CSS-Dateien abweichend gefüllten Feldes Zieldatei-Erweiterungsprefix. Die CSS-Datei hat ein .minifiziert im Dateinamen, die JS-Datei dagegen den Vorgabewert .min, weil dort nicht geändert.
So weit so gut. Aber bei einem weiteren Lauf werden diese beiden bereits bestehenden Zieldateien ohne jede Warnung überschrieben. Um das verhindern zu können, gibt es die Backupeinstellungen, deren Aktivierung ich empfehle:
Feld "Back up existing targets" (= Backup existierendes Ziel)
Die Backup-erstellen-Einstellunen finden Sie im Tabulator Globale Einstellungen & Hinweise des Plugins. Wenn Sie Backup existierendes Ziel auf JA setzen, werden bereits bestehende Zieldateien erst überschrieben, nachdem im Zielordner eine Sicherungskopie mit aktuellem Datum und Zeit im Namen angelegt wurde. Probieren Sie diese Einstellung einfach mit den Testdateien aus und werfen Sie einen Blick in den Testordner.
Feld "Backup in folder /tmp/" (= Backup in /tmp/-Ordner)
Wenn Sie diese Einstellung zusätzlich auf JA stellen, finden Sie Ihre Backups der Zieldateien in Unterordnern des Verzeichnisses /tmp/jscssminifyghsvs/. Ich persönlich finde das am übersichtlichsten, auch, wenn es später um's Löschen der Backups geht. Muss man sich nicht durch mehrere Ordner hangeln.
Probieren Sie die Backup-Felder mit Ihrem Testordner einfach aus. Geht schneller als lesen. Im folgenden Bild habe ich beide aktiviert und finde jede Menge Backups in /tmp/-UnterOrdnern.
Feld "Minified Target" (= Minifiziertes Ziel)
Im obigen Beispiel habe ich das Ziel-Feld leer gelassen. Deshalb wurde die umbenannte Augabedatei (= Target) im selben Ordner wie die Quelldatei gespeichert.
Im Targetfeld können Sie aber auch eine andere Zieldatei in beliebigem Pfad eingeben.
Tragen Sie im Targetfeld der CSS-Datei Folgendes ein. Und noch mal: Den einleitenden Schrägstrich nicht vergessen!
/jscssghsvs/unterordner/sonstwas.css
Speichern Sie das Plugin erneut. Wenn Sie wollen, können Sie zuvor im JavaScript-Tabulator noch die Ausführung der Datei dort deaktivieren.
Es wird ein neuer Ordner (unterordner) angelegt, falls noch nicht vorhanden und die minimierte Zieldatei (sonstwas.css) dort hineinkopiert.
Sie können so jedweden Zielordner und beliebige Dateinamen angeben.
Das Dateiendungs-Prefix .minifiziert wird nicht berücksichtigt, wenn sich im Feld Minifiziertes Ziel ein Eintrag befindet!
Experten: Würde man unter Source und Target den selben Pfad und Dateinamen eintragen, würde die Quelle direkt "geminit". Das ist selbstverständlich mit entsprechender Vorsicht zu verwenden, wenn die Backupeinstellung nicht aktiviert ist.
Feld Notiz
Für freie Vermeke. Das Plugin kümmert sich nicht darum.
Seit Version 2016.03.31 "Lizenz erhalten" (experimentell!)
Der erste Kommentar zu Beginn einer Datei enthält OFT (nicht immer) die Lizenz. Das Plugin versucht bei aktivierter Einstellung, den ersten Kommentar zu erhalten.
:
