Webseiten und ZubehörProgrammierung UmsetzungPflege Backups BetreuungJoomla-Spezialist

JoomlaSchnipsel

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.

Das hier zum Download angebotene Joomla-Plugin heißt System - JsCssMinifyGhsvs (PLG_SYSTEM_JSCSSMINIFYGHSVS).

Warum ich mir das Plugin geschrieben habe

  • 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 FTP 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:

Statusmeldung des Minify-Plugins nach erster Speicherung. Keine Dateien minifiziert.
Statusmeldung des Minify-Plugins nach erster Speicherung. Keine Dateien minifiziert.

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.

Neues Verzeichnis fuer ersten Testlauf des Minify Plugins
Neues Verzeichnis fuer ersten Testlauf des Minify Plugins

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!

Fuer erste Tests und Tutorial Backupfunktionen deaktivieren
Fuer erste Tests und Tutorial Backupfunktionen deaktivieren

Tabulatoren JavaScript, CSS

Wählen sie nun den Tabulator JavaScript.

Im Minify Plugin Tabulator fuer JS oder CSSr waehlen
Im Minify Plugin Tabulator fuer JS oder CSSr waehlen

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:

Für komprimierte Version zu verwendende JavaScript-Datei in das Sourcefeld eintragen und Minifizierung aktivieren
Für komprimierte Version zu verwendende JavaScript-Datei in das Sourcefeld eintragen und Minifizierung aktivieren

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:

Fehlermeldung in Ausgabedatei da falscher Dateityp
Fehlermeldung in Ausgabedatei da falscher Dateityp

Seit Version 2016.03.31 bietet das Plugin zusätzlich die Möglichkeit, die generierte Zieldatei im Browser zu öffnen und zu kontrollieren.
Beachten Sie dabei unbedingt, dass CSS-Dateien und JS-Dateien von Browsern häufig im Cache behalten werden! Es kann deshalb sein, dass Ihnen eine veraltete Version bei Klick auf diesen Link angezeigt wird. LEEREN SIE DEN BROWSER-CACHE nach Öffnung des Links, z.B. durch Tastenkombination STRG+F5.

Ergebnis der Minifizierung im Browser ansehen
Ergebnis der Minifizierung im Browser ansehen
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.

CSS-Quelle fuer Minifizierungsvorgang eintragen und Dateiendungs-Prefix aendern
CSS-Quelle fuer Minifizierungsvorgang eintragen und Dateiendungs-Prefix aendern

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.

Fehlermeldung, da Dateien nicht per FTP auf den Server in Joomla-Ordner hochgeladen
Fehlermeldung, da Dateien nicht per FTP auf den Server in Joomla-Ordner hochgeladen

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.

Erfolgsmeldung nach Erzeugung der mimified Targets
Erfolgsmeldung nach Erzeugung der mimified Targets

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.

Ab und zu mal den Backupordner aufraeumen ist empfohlen
Ab und zu mal den Backupordner aufraeumen ist empfohlen

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.

Minimierte und automatisch benannte Targets im selben Verzeichnis wie die Sources
Minimierte und automatisch benannte Targets im selben Verzeichnis wie die Sources

Im Targetfeld können Sie aber auch eine andere Zieldatei in beliebigem Pfad eingeben.

Im Minify-Plugin Quellen und optional Ziele eintragen und aktivieren oder nicht
Im Minify-Plugin Quellen und optional Ziele eintragen und aktivieren oder nicht

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.

Beliebig benanntes, komprimiertes Ziel in beliebigem Ordner erzeugt
Beliebig benanntes, komprimiertes Ziel in beliebigem Ordner erzeugt
Automatisch neuer Dateiname und neues Verzeichnis fuer Targetdatei auf meinem Server
Automatisch neuer Dateiname und neues Verzeichnis fuer Targetdatei auf meinem Server

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.

ToDo

  • Vielleicht Prüfung auf einleitenden Slash ;-)
  • Link für Kontrolle der Zieldatei: Browser-Cache umgehen!
  • Vielleicht Auswahlmöglichkeit von Quelldateien per "GUI".

Download und Info

PLG_SYSTEM_JSCSSMINIFYGHSVS

Beliebig viele JS- und CSS-Dateien im Joomlaverzeichnis aus dem Backend heraus über Onlinedienste minifizieren. Zieldateien auch mit anderen Namen in beliebigen Ordnern speichern.

Inspiriert durch: javascript-minifier.com/plugins

Download Version 2016.07.30

Letzter Test: Joomla 3.6.2

Unterstützt Updateserver. Benachrichtigung im Backend über Aktualisierungen.

Sprachen: de-de en-gb

Version history:
2016.03.31:
- first public version.
2016.07.26:
- custom form field Subform now namespaced.
2016.07.30:
- correct JS paths in /layouts/

Verbesserungsvorschläge und Feature-Wünsche sind willkommen.

Alle nicht explizit als fertige Erweiterung markierten Skripte und Codes von www.ghsvs.de dienen als Ansätze / Ideen für eigene Ausarbeitung. GHSVS bzw. die jeweiligen Autoren übernehmen keinerlei Garantien beim Einsatz Ihrer kostenlosen Erweiterungen, Programme, Codes und Skripte, helfen aber gerne bei Rückfragen, soweit zeitlich möglich.

JavaScript Joomla CSS Erweiterung Plugin Download SEO