[quote=“spieler”]Hast Du die selben Dateien mal auf dem Mac mit Codekit im Vergleich kompiliert? (ok, dazu benötigt man eine config.codekit)[/quote] Nein, habe ich bis jetzt nicht versucht. Mal schauen ob ich die nächsten Tage mal Zeit finde mir das mal an zu sehen. Wobei ich nicht denke damit da von SW diesbezüglich was kommt. Von daher wäre es vielleicht ganz gut wenn man den Weg geht den SW mit Grunt vorgibt und ggf. auch Weiterentwickelt?!
Leider widerspricht es unserem Workflow und wir denken, dass Gulp eher das nächste Hot-Thing ist. Man muss aber wohl auf mehreren Hochzeiten tanzen. Gesendet von iPad mit Tapatalk
Ich teste es später mal auf der Vagant Maschine. Aber das grunt file auf gulp übertragen sollte nicht das große Problem sein. Ich muss mir später mal die Files ansehen.
Hallo, ich entwickle auf einem lokalen Webserver (MAMP) Templates mit PHP Storm und kompiliere meine .less Dateien mit CodeKit (scheint keine so exklusive Variante zu sein). Ist es möglich eine oder mehrere Dateien mit CodeKit zu kompilieren und die .css irgendwohin zu schreiben. Ich komme von meiner Ausbildung her aus der Grafikecke und mache eigentlich nur Templates, less und CSS. Wenn ich um ein Frontend umzusetzen einen Post berücksichtigen muss der von github, NPM, Grunt, Shell, gruntfile.js, npm install, /bin, usw. handelt bin ich leider raus. Das kann aber doch nicht sein. Das muss doch performanter und / oder anders gehen? Bin dankbar für jeden Tipp Andreas Edit: Ich gebe es zu, ich habe einen ziemlich alten Rechner - bei mir dauert das kompilieren 21 Sekunden.
Ich stelle auch fest, dass es bei der Erstellung eines Webdesigns auch immer mehr dazu übergeht, auf Kommandozeile irgendwelche Sachen einzurichten als sich um das Hauptanliegen zu kümmern: Wie verkauft der Shop mehr? Im Prinzip finde ich die derzeitige Less-Lösung (nach Einarbeitung) total super. Aber es ist einfach die Performance, die nicht stimmt. Eine Offline-Variante mit GRUNT/GULP/WHATEVER macht es unheimlich kompliziert. Letztlich geht die Zeit in den Auftrag mit rein und muss von irgendjemand bezahlt werden. Im Zweifelsfalle nicht vom Kunden.
[quote=“spieler”]Ich stelle auch fest, dass es bei der Erstellung eines Webdesigns auch immer mehr dazu übergeht, auf Kommandozeile irgendwelche Sachen einzurichten als sich um das Hauptanliegen zu kümmern: Wie verkauft der Shop mehr? Im Prinzip finde ich die derzeitige Less-Lösung (nach Einarbeitung) total super. Aber es ist einfach die Performance, die nicht stimmt. Eine Offline-Variante mit GRUNT/GULP/WHATEVER macht es unheimlich kompliziert. Letztlich geht die Zeit in den Auftrag mit rein und muss von irgendjemand bezahlt werden. Im Zweifelsfalle nicht vom Kunden.[/quote] Das sehe ich etwas anders. Ein Entwickler kümmert sich um die Entwicklung und nicht um den Shop selbst. Dinge wie Grunt, Less, Bower & Co sind tägliche Werkzeuge eines “guten” Entwicklers und state-of-the-art Techniken. Grunt / Gulp & Co bieten ja weitaus mehr als nur simple Kompilierung. Bspw. kannst du mit nur einem Kommando Befehl ganze , Files minimieren, Files zusammen fügen lassen etc. etc. Mit Bower bspw. kannst du mit nur einem Kommando Packages updaten, installieren wie bspw. Bootstrap, jQuery Packages oder was auch immer. Man muss und sollte sich als Entwickler natürlich in solche Dinge einarbeiten. Aber die Entwicklung ist die Entwicklung und nicht die Shop Betreuung 
Shopware ist nunmal kein “Baukasten” für Laien und das ist auch gut so und dessen sollte man sich bewusst sein. Und wenn du sagst, dass die Zeit - aufgrund dessen, weil du die Techniken nicht beherrschst - in den Auftrag reingeht, dann musst meiner Meinung nach du dafür zahlen ( oder eben lernen ). Denn der Kunde kann ja nicht für deine Unwissenheit zahlen.
Das sind Dinge, die bei Codekit auch Standard sind. Bloß mit einer Benutzeroberfläche, die sehr schnell und einfach zu bedienen ist. Ja, ich stimme Dir zu, dass man immer am Ball bleiben muss. Es läuft auch grundsätzlich auf Programmierer vs. Grafiker hinaus. Das ist eine Grundsatzdiskussion 
Ich möchte das auch nicht alles überbewerten. Es ist auch ein wenig die jahrzehntelange Diskussion Kommandozeile vs. GUI. Ich benutze GIT auch über Sourcetree und nicht über die Kommandozeile, was ja ein “guter” Entwickler macht.
[quote=“spieler”]Das sind Dinge, die bei Codekit auch Standard sind. Bloß mit einer Benutzeroberfläche, die sehr schnell und einfach zu bedienen ist. Ja, ich stimme Dir zu, dass man immer am Ball bleiben muss. Es läuft auch grundsätzlich auf Programmierer vs. Grafiker hinaus. Das ist eine Grundsatzdiskussion Ich möchte das auch nicht alles überbewerten. Es ist auch ein wenig die jahrzehntelange Diskussion Kommandozeile vs. GUI. Ich benutze GIT auch über Sourcetree und nicht über die Kommandozeile, was ja ein “guter” Entwickler macht.[/quote] Naja ein Entwickler ist ein Entwickler und kein Grafiker :x Da besteht meiner Meinung nach auch keine Disskusion 
Bzgl. am Ball bleiben: Genau so ist es. Ich errinere mich noch sehr gut, dass noch vor einigen Jahren zahlreiche Webseiten auf einem Tabellen Layout aufgebaut haben anstatt mit div`s und css sowie es sich gehört. Aber auch das hat komischerweise mehrere Jahre gedauert, bis das mal in den Köpfen der “Entwickler” angekommen ist. Aber Dinge wie Grunt / Gulp / Bower etc. sind nunmal eben Kommando Zeilen Programme. Und naja - schwierig ist es ja nicht einen Befehl rauszuhauen. Bspw. kannst du mit einem einzigen Befehl - “gulp watch” oder “grunt watch” - Gulp / Grunt dazu anweisen, zu schauen wann eine LESS / SCSS / SASS Datei geändert worden ist und falls ja kompiliert es automatisch die entsprechende LESS Dateie(n) zu einer CSS Datei. Recht easy oder ? Ein simpler Befehl und den Rest macht Grunt / Gulp. Allzuviel muss man da auch nicht lernen, sofern hier denn das nötige Grunt / Gulp File bereit steht. Man muss sich halt wirklich nur mal einen Tag hinsetzen und das ganze ausprobieren und lernen. Ich meine - Das macht doch ein Entwickler jeden Tag oder ? Man lernt jeden Tag, sonst wäre das Leben als Entwickler doch tot langweilig. Das ist ein Teil des Jobs :x Umso mehr freut man sich doch wie ein kleines Kind jedes mal, wenn man die Sache endlich geknackt und weiss wie es geht
anknüpfend an -> themes-und-design-f101/wie-entwickelt-ihr-an-themes-t26928.html#p118700 [list] [*] SW 5.0.1 ist ja mittlerweile raus[/*] [*] mit „/usr/local/php5.6/bin/php bin/console sw:theme:dump:configuration“ wird im „web/cache“ Verzeichnis ein config_1.json-File erzeugt[/*] [*] mit 5.0.1 werden im themes-Verzeichnis jetzt auch eine Gruntfile.js und package.json mitgeliefert ->[/*] [*] ich habe das alles (auch die config_1.json und die timestamp1.txt) lokal heruntergeladen und im themes-Verzeichnis „npm install“ ausgeführt -> im themes-Verzeichnis wird das Verzeichnis „node_modules“ erzeugt, mit den modulen, die in package.json zu finden sind.[/*] [*] ich nutze phpstorm 8 -> hier öffne ich das Terminal -> wechsle in das themes-Verzeichnis und führe dort „grunt“ aus -> der watcher wird gestarte und wartet…[/*] [*] jede Änderung in meinem neuen auf dem Responsiv-Theme-basierendem Theme führt nun dazu das im „web/cache“-Verzeichnis eine neue mit meinen less-Änderungen versehene css-Datei geschrieben wird.[/*] [*] hochlanden …fertig, geht flott und ist handhabbar[/*][/list] Wichtig ist hier, dass die auf dem Server erzeugt timestamp1.txt auch dort bleibt und nicht gelöscht wird. Diese Datei bewirkt, dass die lokal compilierte .css-Datei im FE auch gezogen wird. Ich bin Grafiker mit css, less & sass Kenntnissen:happy:
[quote=„nostromo“] Ich bin Grafiker mit css, less & sass Kenntnissen:happy:[/quote] Oh man - da werde ich echt neidisch. Ich bin Grafiker mit css und less Kenntnissen aber ich habe bisher fast ausschließlich mit Software mit GUI gearbeitet. Es wäre einfach cool wenn ich trotzdem Templates für Shopware 5 erstellen könnte. Neid
[quote=„nostromo“] hochlanden …fertig, geht flott und ist handhabbar [/quote] An der Stelle würde mich mal interessieren, was bei dir flott bedeutet?! Wie oben schon geschrieben, sind es bei mir knappe 5,5 Sekunden allein für die kompilierung.
@kayyy Danke für dein Feedback bezüglich der Zeit für die Tasks. Hab eben mal die einzelnen Schritte gemessen. Execution Time (2015-05-28 17:58:39 UTC) loading tasks 1.4s ▇▇▇▇▇▇▇▇▇▇▇▇ 27% less:development 3.7s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 73% Total 5.1s Bis jetzt hatte ich hauptsächlich mit Gulp gearbeitet. Da hatte ich bis jetzt nie solche Zeiten. Aber wenn es bei anderen ähnliche Zeiten sind… Hier ist allerdings in den DevDocs ein Screenshot in dem die Zeit mit knapp 1.5 Sec angegeben wird. Da Frage ich mich ob man hier die GRuntfile noch optimieren kann oder auf was für einem Setup diese Zeiten zustande kommen. 12 Core MacPro?? 
[quote]Du machst ja auch keine Änderung an der Datei und klickst dann sofort innerhalb einer Sekunde auf deine Seite, um die Änderung zu sehe[/quote] Ich nicht, aber browserSync für mich
Okay Browser Sync ist natürlich etwas anderes :x Der Screenshot bzw. die Laufzeit von Grunt hatte mich auch ein wenig verwundert auf dem Screenshot. Allerdings habe ich hier gerade auch keinerlei Umgebung das ganze so einmal mit einem anderen System zu testen. Vielleicht später noch einmal mit Bootstrap in meiner Test Umgebung. Allerdings sind es natürlich schon recht viele LESS Files die da erst einmal durchgelaufen und kompiliert werden müssen. Anders könnte ich mir es jetzt nicht erklären - Gibt aber auch keine Antwort auf die knappe 1,5 Sekunden im Screenshot Aber die zwei Sekündchen halte ich auch noch aus 
In jedem Fall ist Grunt eine feine Sache und wesentlich schneller als das Shopware interne kompilieren.
Ich nehme noch mal Bezug auf die Beiträge: [list] [*] themes-und-design-f101/wie-entwickelt-ihr-an-themes-t26928.html#p118700[/*] [*] themes-und-design-f101/wie-entwickelt-ihr-an-themes-t26928-20.html#p122910[/*][/list] Mir ist jetzt aufgefallen, dass die über “/usr/local/php5.6/bin/php bin/console sw:theme:dump:configuration” erzeugte config_1.json-File. nicht alle nötigen Pfade (.less und .js) beinhaltet. Wir haben das Plugin “Einkaufswelten Advanced” im Einsatz. Wenn ich das CSS serverseitig compilieren lasse, dann ist alles in Ordnung. Wird das CSS lokal compiliert, dann sind die “Einkaufswelten Advanced” sowohl layouttechnisch wie auch funktional kaputt. Das Plugin liegt unter “/engine/Shopware/Plugins/Community/Frontend/SwagEmotionAdvanced”. Die Pfade zu den dort vorliegenden .less- und .js-Dateien fehlen in der “config_1.json”-Datei. Trage ich die Pfade für .less und .js “händisch” nach, dann klappt alles im FE. Ich habe die config_1.json Datei mehrfach erzeugt, um hier einen Fehler auszuschließen, immer mit dem Ergebnis, dass die oben genannten Pfade nicht eingetragen werden. Ich folgere daraus, dass das Erzeugen der config_1.json-Datei noch fehlerhaft ist und hier nicht alle Plugins korrekt “registriert” werden. Die Gegebenheiten auf dem Server, werden somit nicht korrekt in dem .json-File abgebildet. Ich danke, dass ist ein Bug -> Hilfe SW!!! - ich hoffe jetzt mal, dass die das lesen und mitbekommen.
Danke für den Hinweis. Habe mich trotz leicher Vorbehalte da dran gewagt und komme nicht recht weiter. [quote=„Oliver Skroblin“] 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. [/quote] Wenn ich npm install im Ordner themes ausführe bekomme ich folgende Meldung: [code]npm WARN locking Error: EACCES, open ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-uglify-d02a4bb44e14e413.lock‘ npm WARN locking at Error (native) npm WARN locking /Users/xxxxxxx/.npm/_locks/grunt-contrib-uglify-d02a4bb44e14e413.lock failed { [Error: EACCES, open ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-uglify-d02a4bb44e14e413.lock‘] npm WARN locking errno: -13, npm WARN locking code: ‚EACCES‘, npm WARN locking path: ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-uglify-d02a4bb44e14e413.lock‘ } npm ERR! Darwin 14.1.0 npm ERR! argv „node“ „/usr/local/bin/npm“ „install“ npm ERR! node v0.12.4 npm ERR! npm v2.10.1 npm ERR! Attempt to unlock /Applications/MAMP/htdocs/yyyyyyy/themes/node_modules/grunt-contrib-uglify, which hasn’t been locked npm ERR! npm ERR! If you need help, you may report this error at: npm ERR! https:
npm WARN locking Error: EACCES, open ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-jshint-20d31e76a669005e.lock‘
npm WARN locking at Error (native)
npm WARN locking /Users/xxxxxxx/.npm/_locks/grunt-contrib-jshint-20d31e76a669005e.lock failed { [Error: EACCES, open ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-jshint-20d31e76a669005e.lock‘]
npm WARN locking errno: -13,
npm WARN locking code: ‚EACCES‘,
npm WARN locking path: ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-jshint-20d31e76a669005e.lock‘ }
npm ERR! Darwin 14.1.0
npm ERR! argv „node“ „/usr/local/bin/npm“ „install“
npm ERR! node v0.12.4
npm ERR! npm v2.10.1
npm ERR! Attempt to unlock /Applications/MAMP/htdocs/yyyyyyy/themes/node_modules/grunt-contrib-jshint, which hasn’t been locked
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https:
npm WARN locking Error: EACCES, open ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-watch-b6fe8c15d03aee82.lock‘
npm WARN locking at Error (native)
npm WARN locking /Users/xxxxxxx/.npm/_locks/grunt-contrib-watch-b6fe8c15d03aee82.lock failed { [Error: EACCES, open ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-watch-b6fe8c15d03aee82.lock‘]
npm WARN locking errno: -13,
npm WARN locking code: ‚EACCES‘,
npm WARN locking path: ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-watch-b6fe8c15d03aee82.lock‘ }
npm ERR! Darwin 14.1.0
npm ERR! argv „node“ „/usr/local/bin/npm“ „install“
npm ERR! node v0.12.4
npm ERR! npm v2.10.1
npm ERR! Attempt to unlock /Applications/MAMP/htdocs/yyyyyyy/themes/node_modules/grunt-contrib-watch, which hasn’t been locked
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https:
npm WARN locking Error: EACCES, open ‚/Users/xxxxxxx/.npm/_locks/grunt-8b071e4b0a84b58e.lock‘
npm WARN locking at Error (native)
npm WARN locking /Users/xxxxxxx/.npm/_locks/grunt-8b071e4b0a84b58e.lock failed { [Error: EACCES, open ‚/Users/xxxxxxx/.npm/_locks/grunt-8b071e4b0a84b58e.lock‘]
npm WARN locking errno: -13,
npm WARN locking code: ‚EACCES‘,
npm WARN locking path: ‚/Users/xxxxxxx/.npm/_locks/grunt-8b071e4b0a84b58e.lock‘ }
npm ERR! Darwin 14.1.0
npm ERR! argv „node“ „/usr/local/bin/npm“ „install“
npm ERR! node v0.12.4
npm ERR! npm v2.10.1
npm ERR! Attempt to unlock /Applications/MAMP/htdocs/yyyyyyy/themes/node_modules/grunt, which hasn’t been locked
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https:
npm WARN locking Error: EACCES, open ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-less-173bd63e1e09482e.lock‘
npm WARN locking at Error (native)
npm WARN locking /Users/xxxxxxx/.npm/_locks/grunt-contrib-less-173bd63e1e09482e.lock failed { [Error: EACCES, open ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-less-173bd63e1e09482e.lock‘]
npm WARN locking errno: -13,
npm WARN locking code: ‚EACCES‘,
npm WARN locking path: ‚/Users/xxxxxxx/.npm/_locks/grunt-contrib-less-173bd63e1e09482e.lock‘ }
npm ERR! Darwin 14.1.0
npm ERR! argv „node“ „/usr/local/bin/npm“ „install“
npm ERR! node v0.12.4
npm ERR! npm v2.10.1
npm ERR! Attempt to unlock /Applications/MAMP/htdocs/yyyyyyy/themes/node_modules/grunt-contrib-less, which hasn’t been locked
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https:
npm ERR! Please include the following file with any support request:
npm ERR! /Applications/MAMP/htdocs/yyyyyyy/themes/npm-debug.log
[/code]
Wenn ich im Ordner /bin den Befehl:
console sw:theme:dump:configuration
bekomme ich die Meldung:
-bash: console: command not found
Bei:
php console sw:theme:dump:configuration
Bekomme ich (vor dunkelrotem Hintergrund) die Meldung:
[Zend_Db_Adapter_Exception]
SQLSTATE[HY000] [2002] No such file or directory
Wenn ich in der Konsole php -v eingebe bekomme ich die Ausgabe:
PHP 5.5.14 (cli) (built: Sep 9 2014 19:09:25)
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2014 Zend Technologies
Nur so zur Info, weil ich das in einem anderen Post gefunden habe.
Scheint mir nicht wirklich so, als ob das was mit Shopware zu tun hat. Da ich aber sonst nur mit Software mit GUI arbeite und die Anleitung im Designer´s Guide steht und ich Designer bin ist die Frage hier vielleicht doch richtig.
Über Hilfe würde ich mich freuen.
Danke
Andreas</https:></https:></https:></https:></https:>
Führe npm install evtl. Einmal mit sudo aus. Übrigens die Anleitung hier im Forum ist ja etwas lückenhaft. Hier ist die detaillierte Beschreibung: https://devdocs.shopware.com/designers- … ing-grunt/
1 „Gefällt mir“
Danke kayyy, Schritt für Schritt komme ich voran … Wenn ich npm install mit sudo ausführe funktioniert es - offensichtlich nur ein Rechteproblem. Jetzt habe ich im Ordner Themes den Ordner node_modules mit diversen Inhalten. Bei meinem zweiten Probleme komme ich aber leider nicht voran. Ich kann die Konfiguration nicht exportieren, weil bei mir die Shopware Konsole überhaupt nicht richtig funktioniert. php console sw:theme:dump:configuration gibt (vor dunkelrotem Hintergrund) die Meldung: [Zend_Db_Adapter_Exception] SQLSTATE[HY000] [2002] No such file or directory Ich entwickle auf einem Mac unter MAMP, ich vermute mal, dass es damit zu tun hat. Wenn ich in der Konsole php -v eingebe bekomme ich die Ausgabe: PHP 5.5.14 (cli) (built: Sep 9 2014 19:09:25) Copyright © 1997-2014 The PHP Group Zend Engine v2.5.0, Copyright © 1998-2014 Zend Technologies
Hi Andreas, die Meldung „SQLSTATE[HY000] [2002] No such file or directory“ ist laut Google vorallem bei Mac’s bekannt: http://stackoverflow.com/questions/2412 … statehy000 Anscheined findet es den „socket“ nicht. Trage mal in deiner config.php statt „localhost“ die Ip (127.0.0.1) ein. Dann sollte es auch nicht mehr versuchen über den „socket“ zu gehen. Heiner
1 „Gefällt mir“
Danke, Google sei Dank bin ich auch schon beim Socket gelandet. Es liegt an MAMP. Eine Lösung die bei mir funktioniert ist: Wenn der Fehler [Zend_Db_Adapter_Exception] SQLSTATE[HY000] [2002] No such file or directory auftritt muss mann mit: sudo mkdir /var/mysql cd /var/mysql sudo ln -s /Applications/MAMP/tmp/mysql/mysql.soc ein Alias für den MAMP MySQL socket erstellen. Shopware erwartet den socket wohl woanders als er bei MAMP ist. Danke an alle, ich hoffe jetzt läuft es Andreas