Shopware Theme 101 | Grunt File Watcher

Heute zeige ich euch, wie Ihr mit Grunt eine Menge Zeit spart… Für einige wird dies nichts neues sein. Ich konnte Aufgrund einiger Premium Plugins darin allerdings lokal bisher noch keinen nutzen daraus ziehen. Mehr dazu im Beitrag…

Probleme

Bis vor nicht allzu langer Zeit hat der File Grunt Watcher in unserer Testumgebung nicht zuverlässig funktioniert. Das lag an einigen Premium Plugins (und deren less/js Files), welche nicht mit in die config_x.json in web/cache gezogen wurden.

Das führte zu gravierenden Anzeige Fehlern bis hin zum kompletten Fail des Prozesses. Nun knapp 1 Jahr später habe ich es erneut gewagt und siehe da, es scheint (bisher) gut zu funktionieren.

Was ist Grunt?

Grunt ist ein Task-Runner welcher für wiederkehrende Prozesse eingesetzt wird. In unserem Fall für das kompilieren/minifizieren etc. von LESS und JS.

Ich nutze Grunt und Gulp eigentlich täglich, aber eher für kleiner Projekte in denen meistens ein File-Watcher läuft der mir bei Änderungen neue CSS Files minifiziert o.Ä.

Installation von Grunt

Shopware hat das ganze bereits dokumentiert – ich möchte das ganze aber nochmal aus andere Perspektive zeigen.

Ihr benötigt definitiv nodejs und npm

sowie eine globale Installation der Grunt CLI

 

Grunt lokal in Shopware benutzen

Ihr solltet Grunt niemals im produktiv Modus verwenden, zu viel kann schief gehen und außerdem macht es hauptsächlich beim entwickeln von Themes Sinn und das macht Ihr sicherlich nicht auf dem Liveserver 😉

Löscht zuerst euren Cache komplett (nicht über die CLI – das löscht nicht eure CSS und JS Files) – geht dafür in euren Shopware Root Ordner:

danach dumpt ihr euch die config_x.json files in euren web/cache Ordner

Nun sollten, je nach Shopanzahl ein bis X Files generiert worden sein.

Npm dependencies

Damit Ihr euren Grunt Befehl gleich ausführen könnt benötigt Ihr einige node Module, welche Ihr mit npm install im themes Ordner installiert.

Gegebenfalls müsst Ihr den Befehl mit sudo ausführen.

Grunt Task starten

Nun könnt Ihr entweder alle Shops „watchen“ oder nur bestimmte Shops mit dem Parameter shopId

 

Live Reload

Seit der Shopware Version 5.3 gibt es auch das nette Feature des Live Reloads.

Ladet euch einfach das Plugin für Chrome und installiert es. Danach startet Ihr euren Watcher. Ist dieser im Wait Modus klickt Ihr im Shop einfach auf den Button des gerade installierten Plugins/Extension (Kreis in der Mitte ausgefüllt heißt EIN)

 

 

Beim nächsten ausführen des Grunt Tasks lädt die Seite automatisch neu.

Wichtig

Stellt sicher das Ihr euren Cache in Chrome ausgestellt habt, sonst lädt dieser stets die gespeicherte CSS File.

 

Shellscript für Ausführung

Ich habe grunt meinem Shortcut Script hinzugefügt, damit könnt Ihr den kompletten Prozess mit einem Befehl triggern und euren Shop wählen – mehr Infos dazu findet Ihr im Beitrag.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.