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.

Weitere Links

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
    Antworten

  • 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.
    Antworten

  • 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
    Antworten

  • 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?
    Antworten

  • 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?
    Antworten

  • 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)
    Antworten

  • 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'"
    Antworten

  • 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!
    Antworten

  • 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
    Antworten

  • 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?
    Antworten

  • 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.
    Antworten

  • 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?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

E-Mail: support@8mylez.com

Telefon: +49 (0) 5251 284 710

Shopware Dienstleistungen

Shopware Code AuditShopware PerformanceShopware Leasing

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2023 by 8mylez GmbH //  Impressum + Datenschutz