Shopware 5 Theme Entwicklung mit Grunt

Shopware 5 Theme Entwicklung mit Grunt

Alexander Wolf 19. August 2015 39

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:

Shopware 5 Grunt watch

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.

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

39 Kommentare

  • Hi Alex,

    Ich wollte nur nochmal Danke sagen, das mit Grunt hab ich jetzt vorerst an den Nagel gehangen. Dafür finde ich langsam Spaß an der CLI Konsole. Langsam fallen mir auch wieder diese alten Befehle alle wieder ein ^^

    Grüße
  • Hey Atilla,

    das freut mich!

    Ja Grunt oder die Konsole kann einem den Alltag schon etwas versüßen :)

    Gruß
    Alexander
  • Wenn bei euch (Mac + MAMP) trotz des Updates der Fehler "SQLSTATE[HY000] [2002]" weiterhin auftritt, muss einmal der Port von MYSQL kontrolliert werden.

    Bei MAMP -> Einstellungen -> Ports

    Bei mir musste der Port in der config.php von 3306 auf 8889 geändert werden. Alternativ kann natürlich auch der Port selbst im MAMP geändert werden.
  • Hey Daniel,

    vielen Dank für diesen hilfreichen Tipp!

    Gruß
    Alexander
  • Hallo Jungs,

    kurze Frage:
    "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"

    Muss ich das auch im Terminal eingeben, ja oder? Ich weiß nur nicht wie ich von da aus in irgendeine andere Ebene wechseln kann. Den ersten Befehl hatte ich fehlerfrei durchbekommen.

    Ich habe heute ein neues Shopware lokal via Bitnami aufgesetzt und der Shop liegt in Applications/shopware-5.3.7-0/apps/shopware/htdocs wie in 7 Bisons Namen kann ich da jetzt bite Grunt aktivieren?

    1000 Dank im Voraus,
    Atilla
  • Hey Atilla,

    jo genau, den Befehl musst du auch im Terminal eingeben. In den Ordner navigieren mit cd /Applications/shopware-5.3.7-0/apps/shopware/htdocs und dann php bin/console usw. eingeben (wie oben beschrieben).

    Hierbei verwendest du dann das auf deinem installierte PHP und nicht das von Bitnami, sollte aber keine Probleme machen, sofern du die selben Versionen verwendest.

    Ansonsten kannst du mal nach der Bitnami Console googlen, damit solltest du dann entsprechend die PHP Version in deinem Bitnami Stack nutzen koennen.

    Gruß
    Alexander
  • Hallo Alex,

    Ich habe Grunt wie in der Anleitung erklärt aufgesetzt und arbeite mit phpStorm. Wenn ich die Smarty Blöcke ändere erkennt es Grunt und beim Aktualisieren der Website ist diese auch sichtbar. Wenn ich bei einer .less Datei jedoch z.B. die Farbe ändere ist dies nicht der Fall.

    Grunt erkennt es zwar und macht was, aber die Änderung ist erst sichtbar wenn ich im Backend das Theme neu kompiliere.

    Hab ich da irgendetwas falsch eingestellt oder kann ich mit Grunt automatisch das Theme neu kompilieren?
  • Hey Chris,

    du musst jedes mal nachdem du im Backend kompiliert hast die Konfiguraition neu "dumpen", damit die Verknuepfungen hergestellt werden und Shopware weiß, welche erstellte Datei verwendet werden soll.

    Gruß
    Alexander
  • Habe nachdem ich das gemacht habe lokal einen 500 Error bekommen, weißt jemand woran das liegt?
  • Hey Michi,

    500er Fehler sind in der Regel immer Serverfehler und werden in den Logdateien festgehalten mit einer Fehlermeldung. Wenn du uns diese raussuchen kannst, koennen wir einen Blick drauf werfen!

    Ansonsten sagt es im Allgemeinen, dass der Server falsch konfiguriert ist. Was im Prinzip fast alles sein koennte :/

    Wie arbeitest du lokal? Kommst du an die Logdateien?

    Gruß
    Alexander
  • War mein Fehler, hatte ein Smarty falsch extended. Wurden leider nirgendwo Fehler oder Errors ausgegeben.. Danke dir !
  • Hi Zusammen!!
    ähem.... wie es aussieht hat mich die Grunt installation überfordert....

    Ich habe nodejs installiert.

    Bin dann weiter übers Terminal bis zum Erstellen der config Datei.
    Hier kam ich nicht weiter....
    Deshalb wollte ich das Thema einfach erstmal wieder stecken lassen...

    habe also nodejs wieder deinstalliert mit:

    "sudo npm uninstall npm -g
    sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
    sudo rm -rf /usr/local/include/node /Users/$USER/.npm
    sudo rm /usr/local/bin/node
    sudo rm /usr/local/share/man/man1/node.1
    sudo rm /usr/local/lib/dtrace/node.d
    brew install node "

    Jetzt startet in Mamp der MySqL Server nicht mehr und mein Projekt ist nicht mehr erreichbar.... Mist!!
    Blöd das...

    Kann mir hier evtl. jemand da wieder raushelfen?

    (OSX El Capitan)
  • Hallo iTommy,

    das kriegen wir schon wieder hin.

    Schreib uns doch einfach eine Email an i@8mylez.com und unser Support meldet sich bei dir!

    Gruß
    Alexander
  • Für die lokale Entwicklung mittels MAMP & Co. würde ich eher empfehlen php versions aliases mit den dazugehörigen configs in die eigene ~/.bash_profile einzutragen, da es sonst unter gewissen Umständen und Systemen zu Problemen kommen kann, diese kann man dann zum Beispiel mittels "php56" aufrufen, die Einträge in der .bash_profile könnten z.B. so aussehen:

    alias php55="/Applications/MAMP/bin/php/php5.5.26/bin/php -c '/Library/Application Support/appsolute/MAMP PRO/conf/php5.5.26.ini'"
    alias php56="/Applications/MAMP/bin/php/php5.6.10/bin/php -c '/Library/Application Support/appsolute/MAMP PRO/conf/php5.6.10.ini'"
    alias php56cgi="/Applications/MAMP/bin/php/php5.6.10/bin/php-cgi -c '/Library/Application Support/appsolute/MAMP PRO/conf/php5.6.10.ini'"
  • Hallo Sebastian,

    vielen Dank für deinen Input!

    Ist auf jeden Fall eine gute Idee.

    Gruß
    Alexander
  • Ich bekomme beim Befehl "php bin/console sw:theme:dump:configuration" immer den folgenden Fehler: "Site error: the file /Users/…/Shopware/engine/Shopware/Plugins/Community/Core/SwagLicense/Bootstrap.php requires the ionCube PHP Loader ioncube_loader_dar_5.5.so to be installed by the website operator. If you are the website operator please use the ionCube Loader Wizard to assist with installation."

    IonCube läuft jedoch laut IonCube Loader Wizard und auch laut Shopware fehlerfrei.

    Jemand eine Idee, woran das liegen könnte? Vielen Dank für eure Hilfe im Voraus!
  • Hi, ich habe das selbe Problem. Ich habe jetzt vermutet, dass bei diesem Befehl nicht das MAMP php verwendet wird, sondern das native OSX php und dort fehlt natürlich IonCube.

    Habe es auch nach vielen Stunden nicht lösen können und wäre sehr dankbar für Tipps!
  • Hallo,

    ich bekomme auf Mac OSX beim Versuch die Konfigurationsdatei zu erstellen (php bin/console sw:theme:dump:configuration) ständig folgende Fehlermeldung:

    [Zend_Db_Adapter_Exception]
    SQLSTATE[HY000] [2002] Operation timed out
  • Hallo Oliver,

    das hört sich nach einem Problem mit der Datenbank an.

    Hast du MySQL selbst installiert oder nutzt du MAMP (oder etwas anderes) ?

    Gruß
    Alexander
  • Muss das Compiler Cache eigentlich deaktiviert werden, damit das ganze dann funktioniert?
  • Hallo Björn,

    laut Forum muss es deaktiviert sein. Ich habe beides ausprobiert und konnte keine Probleme feststellen.

    Gibt es bei dir Probleme?

    Gruß
    Alexander
  • Kurz für diejenigen, die das hier lesen und wie ich folgende Fehlermeldung bei Eingabe von "php bin/console sw:theme:dump:configuration" bekommen und bei denen das UPDATE auch nicht hilft:
    "SQLSTATE[HY000] [2002] No such file or directory"

    Ihr müsst in der config.php statt "localhost" "127.0.0.1" eingeben. Dann sollte es funktionieren.
  • Hallo Björn,

    vielen Dank für diesen Tipp!

    Gruß
    Alexander
  • […] UPDATE: Falls ihr Grunt nutzt um eure Themes zu entwicklen, braucht ihr die Einstellung nicht, da dies Grunt für euch übernimmt und die CSS Sourcemap erstellt. Wie ihr das anstellt: Shopware 5 Theme Entwicklung mit Grunt […]

Was denkst du?

Shopware SEO
Guide 2018

shopware seo guide
So optimierst Du Deinen Shopware Shop richtig!
mehr erfahren

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Plugin Theme anpassen
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Staging Umgebung – Was ist das und warum brauchst du eine?
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
© 2017 by 8mylez. Powered by Goltfisch GmbH.