Shopware 5 Theme Entwicklung mit Grunt

Shopware 5 Theme Entwicklung mit Grunt

Alexander Wolf 19. August 2015 29

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 E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

29 Kommentare

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

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

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
Logo Größe anpassen mit Less für Shopware 5
Plugin Theme anpassen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Theme: Eigenes Listing Layout erstellen
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Staging Umgebung – Was ist das und warum brauchst du eine?
© 2017 by 8mylez. Powered by Goltfisch GmbH.