Wie entwickelt Ihr an Themes?

Hallo Community, mich würde einmal grundsätzlich interessieren, wie Ihr entwickelt. Wir benutzen bei kleinen Projekten in der Regel Vererbungen, welche bei SW-Version 4 vom Emotion-, ab SW-Version 5 vom Responsive abstammen. Wir benutzen für Smarty-, Less/CSS-, Javascript- und auch die Pluginentwicklung PHPStorm. Eine eingerichtete Verbindung in PHPStorm schaut meistens via SFTP auf eine Shopinstallation und synct dort je nach Anforderungen nur die Verzeichnisse /templates bzw. /themes. Bei Pluginentwicklung noch ein paar mehr. Nun zu meinem eigentlichen Anliegen: In Shopware 4 war es mit Abschaltung aller Caches noch möglich, Blocks in Templates zu erweitern, CSS zu schreiben oder Javascriptänderungen durchzuführen und dies mit einer passablen Reload-Zeit im Browser auch zu sehen OHNE jedes Mal den Shop-Cache im Backend leeren zu müssen. Um in Shopware 5 das gleiche Verhalten zu erhalten, mussten wir neben der Deaktivierung des Caches (Shop im Bearbeitungsmodus verwenden) auch den Haken „Compiler Caching deaktivieren“ in den Einstellungen des Theme Manager setzen. Damit bekommen wir jede Änderung auch zu Gesicht, jedoch mit mit einer verzweifelnden Reload-Zeit. Haben wir noch etwas übersehen? Was habt Ihr für Vorschläge zu diesem Problem? Beste Grüße Sebastian

Hallo Sebastian, durch das Deaktivieren der CSS und JavaScript Komprimierung in den Theme Manager Einstellungen kannst du eine bessere Ladezeit erreichen. Je nach Hosting Anbieter kann es auch von Vorteil sein lokal zu entwickeln und nur das Ergebnis auf den Server zu laden, damit du dort nur einmal den Cache leeren musst. Ich hoffe dieser Ansatz hilft dir weiter.

Hallo Linus, vielen Dank für deine schnelle Rückmeldung. Wir sind uns darüber einig, dass der Haken “Compiler Caching deaktivieren” aber trotzdem aktiv sein muss, oder? Ich habe es aber auch getestet, man muss ihn setzen um nicht jedes Mal den Shop-Cache leeren zu müssen. Ich habe das einmal gegenübergestellt. Dieser kleine Test betrifft nur die Einstellungen im Theme Manager. Alle anderen Shop-Caches sind deaktiviert. Variante 1: Compiler Caching deaktivieren: an CSS Source Map erstellen: aus CSS komprimieren: an JavaScript komprimieren: an Übernahme Änderung ohne Leerung des Shop-Caches: ja Ladezeit via Firebug: 8,8 Sekunden Variante 2: Compiler Caching deaktivieren: an CSS Source Map erstellen: aus CSS komprimieren: aus JavaScript komprimieren: aus Übernahme Änderung ohne Leerung des Shop-Caches: ja Ladezeit via Firebug: 7 Sekunden Variante 3: Compiler Caching deaktivieren: aus CSS Source Map erstellen: aus CSS komprimieren: an JavaScript komprimieren: an Übernahme Änderung ohne Leerung des Shop-Caches: nein Ladezeit via Firebug: 1,3 Sekunden Variante 4: Compiler Caching deaktivieren: aus CSS Source Map erstellen: aus CSS komprimieren: aus JavaScript komprimieren: aus Übernahme Änderung ohne Leerung des Shop-Caches: nein Ladezeit via Firebug: 1,3 Sekunden Hast du ggf. weitere Ideen? Knappe 2 Sekunden sind schon mal was aber 7 Sekunden Reloadtime immer noch zu fett. :wink: Klar, lokal hat der Geschwindkeit wegen Vorteile. Hier liegt die lange Wartezeit aber nicht an der Bandbreite oder dem Hoster. Beste Grüße Sebastian

1 „Gefällt mir“

Das würde mich auch brennend interessieren! Bei einer Vm die auf einem C2D mit 2,4 ghz läuft dauert so ein Reload nämlich auch gerne mal 17 Sekunden :frowning: Edit: Ohne VM dann auch auf 7-8 Sekunden – immer noch ein hartes Brot zum Bugfixen…

Hi zusammen, wir arbeiten hier bereits an einer Lösung, bei der sich die zu kompilierenden Dateien und Konfigurationen in eine lokal less Datei dumpen lassen um dann die Kompilierung lokal vornehmen zu können. Wir melden uns wenn wir weitere Infos haben. Gruß Oliver

Hi zusammen, wir haben uns euer Feedback bezüglich der Less Kompilierung zu Herzen genommen. Dazu haben wir uns in den letzten Tagen hingesetzt und eine Lösung erarbeitet, bei der es möglich ist, Less und Javascript Dateien lokal kompilieren zu lassen. Die entsprechenden Änderungen findet Ihr in diesem Commit: https://github.com/shopware/shopware/co … 9912bd43a2 Nebenbei haben wir auch noch den Prozess der Kompilierung angepasst, so dass beim leeren des Caches nicht erst die Dateien entfernt werden, sondern zunächst die Kompilierung intern ausgeführt wird und anschließend in die entsprechenden Dateien geschrieben wird. So ist der Shop permanent erreichbar ohne dass im Frontend auf die neu kompilierten Dateien gewartet werden muss. Wie genau die Lokale Kompilierung funktioniert, wird demnächst genauer in einem Beitrag in unseren Devdocs erklärt. Im groben funktioniert das ganze wie folgt: Installation: 1. Installiert euch NPM + Grunt auf eurem Rechner 2. Geht auf eurer Shell in den Ordner themes/. Dort befindet sich eine Gruntfile.js. 3. Führt “npm install” in dem themes/ Ordner aus. Verwendung: 1. Geht über die Shell in den /bin/ Ordner eurer Shopware Installation 2. Hier könnt ihr nun den Befehl “sw:theme:dump:configuration” ausführen. Dieser Befehl erzeugt im web/cache Ordner eine .json Datei mit allen aktuellen Einstellungen eurer Installation (Plugins, Themes, Theme Einstellungen, etc.). 3. Wechselt in euerer Shell in den Ordner /themes/ 4. Hier könnt ihr jetzt einfach “grunt” ausführen. Dieser Befehl erstellt nun die benötigte theme_*.css und theme_*.js Datei. Zudem wird ein watch ausgeführt, welcher Änderungen an .js und .less Dateien erkennt und diese automatisch neu kompiliert. Hoffe das hilft euch bei der Entwicklung und spart euch zeit. Wichtig dabei ist, deaktiviert auf jedenfall die Option “Theme cache deaktivieren”! Sonst überschreibt Shopware die Dateien natürlich wieder. Falls Ihr Fragen habt meldet euch einfach :wink: Gruß Oliver

1 „Gefällt mir“

Leider ist es bei uns wegen EDV-Richtlinien nicht möglich, SW lokal zu installieren. Wir haben lediglich per FTP Zugriff auf eine Shopware-Installation. Lokal installiert haben wir PHP-Storm, node, npm, grunt und bower. Kann der von euch beschriebene Prozess mit unsren Rahmenbedingungen ebenfalls durchgeführt werden? Oder welche Alternativen gibt es noch?

Hi, ja, du kannst doch „sw:theme:dump:configuration“ extern ausführen und dann die benötigten Dateien für „grunt“ herunterladen. Das musst du sogar nur einmal machen. Danach kannst du lokal deine Less-Dateien bearbeiten und „grunt“ ausführen. Zum Schluss kannst du die so erzeugten Dateien wieder hochladen. Alternativ kannst du einfach auch alles extern machen, wenn du dort „grunt“ etc. installieren kannst. Heiner

Danke für die schnelle Antwort. OK, die .json-Datei kann ich kriegen. Was mir jetzt noch nicht ganz klar ist: Ich habe im Theme-Manager ein neues Theme erstellt - abgeleitet von Responsive. In meinem Theme befindet sich aber keine Gruntfile.js. Muss ich jetzt noch das Gruntfile.js vom Responsive-Theme in das von mir erstellte Theme kopieren? Oder anders gefragt: Von wo aus soll/muss ich “npm install” ausführen? Und verstehe ich das richtig, dass der ganze Prozess erst mit SW 5.0.1 klappt (https://github.com/shopware/shopware/co … 9912bd43a2)?

1 „Gefällt mir“

Ein integrierter Less-Compiler ist nicht wirklich eine gute Idee. Die angebotene Lösung finde ich äußerst kompliziert und sie läuft mit der 5.0.0 wohl nicht, wenn ich das richtig sehe. Ich sehe für mich fast nur die Lösung wieder eigene LESS-Dateien lokal zu nehmen, die dann alles überschreiben und so gut wie gar nichts der anderen LESS-Dateien benutzen.

Was ist „Übernahme Änderung ohne Leerung des Shop-Caches: nein“ und wie stelle ich das ein? Bei mir dauert das Kompilieren im Moment 13sec …

Hallo spieler, damit meine ich, ob Änderungen (z.B. am Template, less, etc.) OHNE das ich im Backend den Cache leeren muss, im Frontend sichtbar werden. Beste Grüße Sebastian

Hi, das Problem ist Less.php. Dieses braucht die 13 Sekunden zum kompilieren. Laut der Doku kann man aber in solchen Fällen ein eingebauten ZwischenCache aktiveren: https://github.com/oyejorge/less.php#caching Dafür hatte ich auch schon mal ein Plugin geschrieben. Vielleicht hilft euch das ja weiter? Heiner

2 „Gefällt mir“

Gibt es inzwischen eine ausführliche Beschreibung wie wir lokal mit einem less-compiler arbeiten können? Wir arbeiten hier auf einem Mac mit Coda als Editor und Codekit als Compiler. Der Shop ist auf einem Linux-Server.

Hallo Heiner, ich habe jetzt Dein Plugin installiert. Der Effekt ist, dass die Seite sehr schnell aufgebaut wird, wenn es KEINE Less-Änderung gibt. Wurde etwas in Less geändert, dauert es wieder 13sec. Habe ich den Sinn falsch verstanden?

Gibt es in der 5.1 nicht ein Gulpfile um LESS zu kompilieren ?

@kayyy Es gibt eine File für Grunt nicht für Gulp! Wenn das für Gulp auch noch kommen würde, wäre das aber schon klasse!

Richtig klasse wäre ein config.codekit-file! :happy:

Was mich mal interessieren würde ist, wie bei euch die Zeiten sind bis der Grunt-Task komplett fertig ist?! Bei mir (lokal über MAMP) sind es aktuell knapp 5,5 Sekunden inkl. automatischen Browserreload (per browserSync). Gruß

Hast Du die selben Dateien mal auf dem Mac mit Codekit im Vergleich kompiliert? (ok, dazu benötigt man eine config.codekit)