Shopware 5 Theme Entwicklung mit Grunt

Im letzten Beitrag haben wir uns angeschaut wie wir unser Theme mit LESS anpassen können.

Wie ihr bereits gemerkt habt, muss LESS jedenfalls kompiliert werden. Es wird einfach in CSS übersetzt.

Dieses Kompilieren können wir automatisieren. Wie? Mit Grunt.

Was genau das ist und wie es funktioniert, findet ihr auf deren Website. Ich zeige euch nur wie ihr eure Themes damit zum Laufen bekommt um euch etliche Klicks zum Kompilieren zu ersparen.

Vorbereitung

Um Grunt auf unserem Mac zu installieren brauchen wir folgendes:

node.js

Installer auf nodejs.org runterladen und ausführen.
Im Terminal

sudo npm install npm -g

eingeben um den Paketmanager ggf. upzudaten.

Grunt CLI

Im Terminal

sudo npm install -g grunt-cli

eingeben um das command line interface zu installieren, sodass wir grunt überall nutzen können.

Konfigurationsdatei

Bevor wir starten können, müssen wir eine Konfigurationsdatei generieren mit allen Informationen zu unserem ausgewählten Theme. Dazu einfach auf höchster Ebene beim Shop folgendes eingeben:

php bin/console sw:theme:dump:configuration

Es wird die Datei

/web/cache/config_1.json

angelegt (die 1 steht für die Shopid, kann also abweichen).

Grunt Module

Zu guter Letzt noch in den themes Ordner wechseln mit

cd themes

und alle grunt Module lokal installieren mit

sudo npm install

Starten

Alles ist vorbereitet und wir können loslegen. In der Gruntfile (Konfigurationsdatei für Grunt selbst) ist ein Modul installiert, welches die Veränderungen der Dateien beobachtet. Sobald wir an einer LESS Datei Anpassungen vornehmen werden diese automatisch kompiliert und wir brauchen nur noch die Seite neuladen im Shop. Deutlich einfacher und schneller als jedesmal im Backend das Theme zu kompilieren.

Um dies zu starten einfach

grunt

*Falls Fehler bzgl. Zugriffsberechtigung anfallen, einfach sudo vorschreiben. Dies führt den Code als Administrator aus.

und wir sehen folgendes:

Grunt überwacht unsere Dateien und wir können lustig drauf loscoden.

Zusammenfassung

Wir haben node.js (inkl. npm) und Grunt installiert. Grunt ist ein Task Runner, der bestimmte Aufgaben automatisiert ausführen kann. In unserem Fall ist es das Kompilieren von LESS Dateien. Es beschleunigt und erleichtert die Arbeit um einiges. Wenn wir etwas vertrauer mit Grunt seid, könnt ihr weitere Module einbauen und noch mehr automatisieren. Demnächst gibt es eine Liste über weitere Module die sehr gut in Verbindung mit Shopware 5 Theme Entwicklung eingesetzt werden können.

Update

Bei einigen gab es folgenden Error:

[Zend_Db_Adapter_Exception]
SQLSTATE[HY000] [2002] No such file or directory

Das könnt ihr aber ganz einfach lösen mit folgenden Befehlen:

sudo mkdir /var/mysql
sudo ln -s /Applications/MAMP/tmp/mysql/mysql.sock /var/mysql/mysql.sock
sudo chown _mysql /var/mysql/mysql.sock
sudo chmod 777 /var/mysql/mysql.sock

Bei Fragen einfach ein Kommentar schreiben.

MAMP

Wenn du lokal entwickelst mit MAMP, dann musst du die richtige PHP Version erwischen, damit die Konsolenbefehle von Shopware greifen. Wie rawcat unten in den Kommentaren bereits geschrieben hat (Vielen Dank dafür!), muss der richtige Pfad angegeben werden. Bei ihm war es /Applications/MAMP/bin/php/php5.6.2/bin/php bin/console sw:theme:dump:configuration.

Weitere Links

• Shopware Listing Layout