So eine weitere Herausforderung zum kompilieren mit Grunt: Wenn ich mit Grunt kompiliere werden Pfade in den .less Dateien (z.B. …/…/font oder …/…/img) so auch in die css Dateien geschrieben. Wenn ich die .less Dateien über den Theme Manager kompiliere werden die Pfade überschrieben nach dem Schema: …/…/themes/Frontend/MEIN_TEMPLATE/frontend/_public/src/ Wenn die kompilierte css in web/cache liegt ist das so auch richtig. Hat jemand dafür eine Lösung? Danke Andreas
Ich komme bei dem Thema mit den Pfaden nicht voran und wüsster gerne mal ob andere die mit Grunt kompilieren auch das Problem haben oder ob das eine Fehler von mir ist. Ich habe mit einer frischen Installation extra noch mal folgendes gemacht: 1. Theme erstellt und vom Responsive abgeleitet 2. Dateien all.less und test.less erstellt 3. In test.less habe ich dem Header ein Hintergrundbild verpasst .header-main {background-image: url("…/img/bg.png");} 4. Mit grunt kompiliert - Pfad stimmt nicht 5. Aus dem Theme Manager kompiliert - der Pfad wird durch einen relativen Pfad aus dem Verzeichnis web/cache ersetzt und stimmt Hat jemand anderes auch das Problem, gibt es dafür ein Workaround oder besser noch eine Lösung? Danke Andreas
Der “falsche” Pfad bei lokal erzeugten css-Dateien ist aus meiner Sicht auch noch ein Bug in der in 5.0.1 eingeführten Möglichkeit der lokalen Kompilierung. Ebenso wie -> themes-und-design-f101/wie-entwickelt-ihr-an-themes-t26928-30.html#p123092 Wenn man den Pfad lokal anpasst und das css hochläd, dann klappt alles. Aber, wenn man nochmal im BE final kompiliert, dann passt der Pfad nicht mehr. Das ist noch ein Problem von SW. Ich denke, das müsste noch in die config_#storeID.json mit rein.
Danke nostromo, dann liegt es nicht an mir. Wäre schön wenn das zeitnah korrigiert würde. Die Grunt Methode ist zwar schneller aber so natürlich auch nicht hilfreich …
Ich behelfe mir im Moment so, dass ich mir zwei Pfad-Variablen anlege: // local //css-img–path: „…/…/themes/Frontend/###ThemeName###/frontend/_public/src/img“; // server @css-img–path: „…/…/img“; Und diese entsp. ein-/auskommentiere, je nachdem wo ich das CSS kompilieren lasse. Schön ist das nicht, aber bis zur Behebung muss wohl.
Ich schließe mich der Problematik mit den Pfaden zu Grafiken, die ich im CSS (LESS) nutzen möchte an. Aktuell stehe ich dabei total auf dem Schlauch und ziehe meine Hintergrundbilder aus dem media/images Ordner. Natürlich muss ich sie dort manual hochladen. background-image: url('/media/image/dark-wood.jpg'); Über eine Lösung wäre ich sehr dankbar. Ich möchte, dass meine Bilder und andere Assets aus dem Theme in ein öffentliches Verzeichnis deployed werden und dann dem CSS zur Verfügung stehen. Bin für jeden Hinweis dankbar, Stefan
Hallo zusammen, ich musste mich heute notgedrungen damit beschäftigen. Ich fand es auch nicht gut jedes mal das Theme kompilieren zu müssen. Cache abschalten war auch keine Option, da dann jeder Seitenaufruf ca. 15 Sekunden gedauert hat. Außerdem wollte ich browsersync benutzen. Folgendermaßen habe ich es jetzt gemacht und bin damit auch recht glücklich. 1.) Responsive Theme kopiert 2.) Im less Ordner des Themes eine neue less Datei erstellt 3.) Im less Ordner einen Unterordner erstellt, hier landen letztendlich alle less Files die ich für das Theme brauche. Die hier abgelegten less Dateien müssen in der in Schritt 2 angelegten less Datei importiert werden! 4.) package.json im themes/ Hauptordner angepast (grunt-browser-sync) 5.) npm install ausführen 6.) Gruntfile angepasst (browsersync) 7.) browsersync angepasst (…/web/cache/*.css) muss beobachtet werden 8.) bin/console „sw:theme:dump:configuration“ (das muss gemacht werden damit auch die Variablen aus der Theme Shopware Backend Konfiguration beachtet werden). Das muss auch gemacht werden, wenn ihr dort was ändert. Gruß Stefan
Hallo zusammen, [quote=“Oliver Skroblin”] 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.). [/quote] Hier ist mir aufgefallen, dass die Reihenfolge der JavaScripte suboptimal war. In der Json Datei stand das Advaced menu zuerst, danach erst jquery. Führte dann dazu das es im kompilierten Zustand nicht lief, da Jquery noch nicht geladen war. Ich habe mir jetzt so beholfen, dass ich in der JSON Datei das Advanced Menü JS ans Ende verschoben habe. Danach lief auch das kompilierte JS 
Gruß Stefan
Gibt es für die Performanceprobleme beim Entwickeln jetzt eine Lösung das alles hier sieht mir so ziemlich nach Behelfs Lösungen aus nix konkretes. Es kann doch nicht sein das man vor dem Entwickeln erst einmal 3 Stunden seine IDE konfigurieren muss. Das Ganze ist echt ernüchternd und ein sehr Fader beigeschmack der neuen Shopware versionen aber hauptsache außen ist alles hui 
nur wie man schnell dort hin kommt scheint bei Shopware keinen zu interessieren… schade… Gruß Florian
Ja, soweit es möglich ist, wurde das Performanceproblem gelöst. - Die Geschwindigkeit ist nur noch abhäng von deinem System: Aktuellste PHP Version installieren! - PHP 7 wird mit Shopware 5.1 unterstützt: doppelte Performance. - Man kann Plugins dafür schreiben: themes-und-design-f101/wie-entwickelt-ihr-an-themes-t26928-10.html#p122162 - Grunt-Task erstellt: Damit kann die LESS-Datei nun lokal erstellt werden. Viele Grüße Heiner
[quote=“Heiner Lohaus”]Ja, soweit es möglich ist, wurde das Performanceproblem gelöst. - Die Geschwindigkeit ist nur noch abhäng von deinem System: Aktuellste PHP Version installieren! - PHP 7 wird mit Shopware 5.1 unterstützt: doppelte Performance. - Man kann Plugins dafür schreiben: themes-und-design-f101/wie-entwickelt-ihr-an-themes-t26928-10.html#p122162 - Grunt-Task erstellt: Damit kann die LESS-Datei nun lokal erstellt werden. Viele Grüße Heiner[/quote] So ganz schlau werde ich aus der Aussage “man kann Plug-Ins dafür schreiben” nicht. Heißt das dass der Entwickler sich selbst erst ein Plug-In schreiben muss um zukünftig anständig für Shopware zu entwickeln? Wäre es nicht von Vorteil würde Shopware alles Erforderliche dafür Bereitstellen? Gruß Florian
Hi, das Problem ist ja Less.php + Caching deaktivieren = schlechte Performance. Die offizielle Lösung von Less.php ist ein Caching zu aktivieren, wenn man ein langsames System hat. Auf meinem System (PHP7) wird die Less-Datei in 2 Sekunden aufgebaut. Für das Live-System ist das natürlich nicht in Ordnung, aber für eine Entwicklungsumgebung reicht es. Bessere Performance würde man sonst nur ohne Less bekommen. (was aber wiederum eine schlechtere Client-Performance und weniger Anpassbarkeit bedeutet würde) Und daher gibt es im Standard den “Theme Cache” und mein Beispiel-Plugin implementiert den “Less_Cache”. Den LessCache finde ich z.B. sehr praktisch, da dann die Less nur bei Änderungen neu-erzeugt wird. (Ich bin eher ein JS/PHP-Entwickler) Less hat also Vor- und Nachteile. Aber ein Problem oder etwas was man optimieren könnte, kann ich hier nicht erkennen. Viele Grüße Heiner
[quote=„nexxoo“][quote=„Heiner Lohaus“]Ja, soweit es möglich ist, wurde das Performanceproblem gelöst. - Die Geschwindigkeit ist nur noch abhäng von deinem System: Aktuellste PHP Version installieren! - PHP 7 wird mit Shopware 5.1 unterstützt: doppelte Performance. - Man kann Plugins dafür schreiben: themes-und-design-f101/wie-entwickelt-ihr-an-themes-t26928-10.html#p122162 - Grunt-Task erstellt: Damit kann die LESS-Datei nun lokal erstellt werden. Viele Grüße Heiner[/quote] So ganz schlau werde ich aus der Aussage „man kann Plug-Ins dafür schreiben“ nicht. Heißt das dass der Entwickler sich selbst erst ein Plug-In schreiben muss um zukünftig anständig für Shopware zu entwickeln? Wäre es nicht von Vorteil würde Shopware alles Erforderliche dafür Bereitstellen? Gruß Florian[/quote] Wie Heiner bereits sagte kannst du den Gulp Task laufen lassen, sodass du eben nicht ins Backend gehen musst und das Theme jedes mal neu zuweisen musst. Dann würde sich evtl. empfehlen die Chrome Extension „clear cache“ zu installieren und auf einen Shortcut zu hauen. So aktualisierst du dann deine Seite und löscht gleichzeitig auch den Browser Cache. Wie du den Grunt Task zum rennen bekommst steht hier: https://developers.shopware.com/designe … velopment/ Bzgl. des Plugins von Heiner: Dieses bringt bei mir keinerlei Vorteile. Aber der Grunt Task läuft bei mir in 2 Sekunden durch, ist also halb so wild. Auf der VM allerdings dauert er rund 10 Sekunden.
1 „Gefällt mir“
Hallo Community, hoffentlich kann mir jemand helfen. Ich habe node, npm und grunt installiert. Außerdem die /web/cache/config_1.json erstellt. Wenn ich aber nun grunt starten möchte, passiert folgendes: [root@myshop themes]# grunt Loading "Gruntfile.js" tasks...ERROR \>\> Error: Unable to read "../web/cache/config\_undefined.json" file (Error code: ENOENT). Warning: Task "default" not found. Use --force to continue. Aborted due to warnings. Kann mir hier jemand helfen? Danke
Du musst beim Start von Grunt die shop ID Übergeben, in der Regel 1: grunt -shopId 1
1 „Gefällt mir“
Wie analog.eins auch schon sagte musst du grunt --shopId 1 verwenden. Ein paar mehr Infos: https://developers.shopware.com/designe … velopment/
1 „Gefällt mir“
Danke euch beiden. Der Parameter --shopId 1 hatte zunächst nicht funktioniert. Nachdem ich aber erneut npm install im /themes Verzeichnis ausgeführt habe, startet nun Grunt mit grunt --shopId 1. Nun habe ich aber ein seltsames Verhalten. Ich hatte vor der Installation v. Grunt bereits einige Änderungen am Theme vorgenommen; also nicht nur in der Theme Backend Konfiguration, sondern auch in diversen LESS und TPL Dateien. Nach starten von grunt und dessen initialem grunt -shopId 1 Running "less:development" (less) task \>\> 1 stylesheet created. Running "uglify:development" (uglify) task \>\> 1 file created. wurde der Shop im Frontend nur mit den eingetragenen Anpassungen der Theme Konfiguration angezeigt, sämtlich anderen Anpassungen waren verschwunden. Zum Testen habe ich dann erstmal in einer LESS Datei eine Schriftfarbe geändert, grunt watch erkannte das, und die geänderte Farbe wurde sofort im Frontend angezeigt. Um meine vorherigen Anpassungen wieder sichtbar zu machen, habe ich dann den SW internen Compiler über das Backend laufen lassen, et voilà, sämtliche „alte“ Anpassungen waren wieder da, inklusive der von grunt kompilierten Schriftfarbe. Wenn ich aber nun grunt laufen lasse und Änderungen an LESS Dateien durchführe, erkennt und kompiliert mir grunt diese auch, aber im Frontend werden sie nicht angezeigt. Erst wenn ich den SW internen Compiler wieder laufen lasse, passt alles. So hilft mir grunt aber gar nichts. Grunt wirft keine Fehler: Waiting... \>\> File "Frontend/MYSHOP/frontend/\_public/src/less/\_modules/header.less" changed. Running "less:development" (less) task \>\> 1 stylesheet created. Done, without errors. Completed in 2.752s at Tue Dec 01 2015 11:45:44 GMT+0100 (CET) - Waiting... Hat jemand eine Idee, wo hier das Problem liegen könnte? In den Theme Einstellungen ist folgendes deaktiviert: - Neuladen der Textbausteine erzwingen - Compiler Caching deaktivieren - CSS komprimieren - JavaScript komprimieren Danke für Eure Hilfe EDIT: Wenn ich den Haken bei Compiler Caching deaktivieren setze, werden die Anpassungen auch angezeigt. Dann lädt halt das Frontend wieder ewig. Wirklich schneller ist das dann auch nicht.
Hört sich für mich nach einem Cache Problem an. Hast du den Cache mal komplett geleert?
Ich habe bei mir nun lokal Grunt eingerichtet und es läuft so weit. Habe sowohl das Compiler Caching beim Theme deaktiviert und nutze den Shop im Bearbeitungmodus. Die geänderten Dateien werden per Autoupload in PHPStorm hochgeladen.
Zum Verständnis. Ich verstehe, dass die LESS Files nun lokal erzeugt werden und dann auf den Server geladen werden. Würde man Grunt nicht verwenden würden die LESS Files auf dem Server erstellt. Es ist also so, dass die lokale Erstellung der Less Files über Grunt schneller ist als die Erstellung Serverseitig und dies der eigentliche Geschwindigkeitsvorteil ist ?
Bitte posted doch einmal mit welchen Shopware Cache Einstellungen ihr nun das Ganze verwendet.