Wie kann man die Standardkonfiguration von Magento 2 Grunt erweitern, ohne Kerndateien wie Gruntfile.js
und zu berühren / zu bearbeiten dev/tools/grunt/configs/themes.js
?
Das Erstellen eines neuen Themas für Magento 2 könnte eine Herausforderung sein, selbst wenn Sie bereits Erfahrung mit Magento haben. Anständige Entwickler würden die Magento-Kerndateien nicht ändern, sondern stattdessen "Wrapper" erstellen. In Zukunft werden Sie also keine Patches installieren und Updates durchführen, wenn alle Ihre Änderungen überschrieben oder falsch zusammengeführt werden.
Erweitern Sie die Dateien Gruntfile.js und theme.js
Angenommen, Sie haben ein neues Thema erstellt. Wie wir aus der Dokumentation zu Magento 2-Dokumenten wissen, müssen Sie die Datei ändern, dev/tools/grunt/configs/themes.js
indem Sie Ihr Thema zur Liste hinzufügen, damit Grunt CSS / Less-Dateien in einen pub/static
Ordner kompilieren / symlink / kopieren kann .
Schritt 1: Erstellen Sie eine /dev/tools/grunt/configs/themes.yourthemename.js
Datei, die die Standarddatei themes.js
als erweitert
'use strict';
var defaultThemes = require('./themes'),
_ = require('underscore');
var yourTheme = {
yourthemename: {
area: 'frontend',
name: '<vendor>/<yourthemename>',
locale: 'en_US',
files: [
'css/main',
],
dsl: 'less'
}
};
module.exports = _.extend(defaultThemes, yourTheme);
Schritt 2: Gruntfile.js
Mit Datei erweiternGruntfile.yourthemename.js
'use strict';
var defaultGruntfile = require('./Gruntfile'),
_ = require('underscore');
var yourthemeGruntfile = {};
yourthemeGruntfile.themes = require('./dev/tools/grunt/configs/themes.yourthemename');
module.exports = _.extend(defaultGruntfile, yourthemeGruntfile);
Schritt 3: Jetzt können Sie Grunt-Aufgaben für Ihr Thema ausführen, wie:
grunt --gruntfile=Gruntfile.yourthemename.js clean:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js exec:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js less:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js watch:yourthemename
exec:yourthemename
, bekommst duWarning: Required config property "clean.yourthemename" missing. Used --force, continuing.
? Es ist seltsam, dass ich mein Thema mit demclean:yourthemename
Befehl bereinigen kann, aber ichexec
denke, der Befehl sollte dies ohne Fehler tun.dev/tools/grunt/configs
a ausgeführt werdenrequire('./themes')
, Beispiele sindclean.js
undexec.js
in diesem Konfigurationsverzeichnis. Was mich glauben lässt, dass diesen Dateien dann unser neu hinzugefügtes Thema fehlen wirdthemes.yourthemename.js
. Trotzdem funktioniert dieses Setup. Ich kann die Ursache meinesRequired config property "clean.yourthemename" missing.
Fehlers einfach nicht bestimmen ...Wenn die Lösung von Jev Mokrousov nicht zu Ihnen passt, können Sie zwei Alternativen ausprobieren:
Composer-Befehl nach der Installation
Während der Installation des
magento/magento2-base
Pakets werden die DateiGruntfile.js
und der Ordnerdev/tools
aus dem Paket in Ihren Stammordner kopiert, wobei alle vorhandenen Dateien überschrieben werden, was durch die Magento2-Basiszuordnung verursacht wirdcomposer.json
(siehevendor/magento/magento2-base/composer.json
in Ihrem Projekt):Sie können Ihre Versionen von
Gruntfile.js
unddev/tools/grunt/configs/themes.js
irgendwo platzieren (wir haben sie in unsere Build-Verzeichnisstruktur eingefügtbuild/tools/grunt/
).Jetzt besteht die Möglichkeit, zusätzliche Befehle oder Skripte vor oder nach bestimmten Composer-Ereignissen hinzuzufügen . Wir könnten uns an das
post-install-cmd
Ereignis von Composer anschließen, um unsere Versionen dieser Dateien über die Kerndateien von Magento zu kopieren. Sie sollten dies zu Ihrem Projekt hinzufügencomposer.json
:Dies wird Ihnen zeigen:
Theme als Composer-Modul
Genau wie das
magento/magento2-base
Paket Dateien in das Stammverzeichnis des Projekts abbildet (wie oben beschrieben), können Sie dies auch selbst tun.Sie können Ihr Thema in einem separaten Composer-Paket ablegen. Sie müssen hierfür ein separates Repository erstellen. In den Magento-Dokumenten wird dieser Vorgang bereits beschrieben: Siehe "Machen Sie Ihr Thema zu einem Composer-Paket".
Fügen Sie dies nun in die
composer.json
Datei Ihres Themas ein :Stellen Sie sicher, dass der erste Pfad auf die richtige Stelle in Ihrem Themenpaket zeigt. Die Pfade sind relativ zum Speicherort der
composer.json
Themendatei.Warnung:
Beide Lösungen überschreiben Kerndateien. Dies kann Patch- oder Upgrade-Probleme verursachen. Wenn Sie patchen und aktualisieren, sollten Sie immer überprüfen, was geändert werden soll, und diese Änderungen auf Ihre Kopien dieser Kerndateien anwenden.
quelle
Wie ich bin sicher , dass viele Menschen finden sich erstreckt , ein übergeordnetes Thema , anstatt vollständig ein Thema von Grund auf neu, hier einige etwas andere Syntax für die angebotenen
themes.yourThemeName.js
Datei. Anstatt die Konfiguration für unser Thema vollständig von Grund auf neu zu definieren, erben wir sie vom übergeordneten Thema und fügen dann hinzu, was neu / anders ist.In diesem Beispiel erben wir von der Konfiguration von blank, legen unseren Themennamen fest und fügen die zusätzlichen Stammdateien unseres Themas hinzu. Dies hat den Vorteil, dass Sie nicht alle Dateien des übergeordneten Themas deklarieren müssen. Für Personen, die ein übergeordnetes Thema erweitern, das regelmäßig aktualisiert wird, kann dies von Vorteil sein. (Die Verwendung von blank als Beispielszenario ist hier wahrscheinlich nicht die am besten geeignete Situation, aber die hier angewendeten Konzepte sind wichtig).
quelle