Magento 2 fügt ein neues Thema hinzu, ohne die Kerndateien zu ändern. Grunzen

11

Wie kann man die Standardkonfiguration von Magento 2 Grunt erweitern, ohne Kerndateien wie Gruntfile.jsund zu berühren / zu bearbeiten dev/tools/grunt/configs/themes.js?

Jev Mokrousov
quelle

Antworten:

10

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.jsindem Sie Ihr Thema zur Liste hinzufügen, damit Grunt CSS / Less-Dateien in einen pub/staticOrdner kompilieren / symlink / kopieren kann .

Schritt 1: Erstellen Sie eine /dev/tools/grunt/configs/themes.yourthemename.jsDatei, die die Standarddatei themes.jsals 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.jsMit 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
Jev Mokrousov
quelle
Ist es mit dieser Methode möglich, eine neue Aufgabe im Gruntfile zu registrieren? Ich habe Probleme, Zugriff auf "Grunzen" in meiner erweiterten Datei zu erhalten.
Tisch
1
Es wurde herausgefunden, wie die Grunzdatei
Tisch
1
Jev, wenn du rennst exec:yourthemename, bekommst du Warning: Required config property "clean.yourthemename" missing. Used --force, continuing.? Es ist seltsam, dass ich mein Thema mit dem clean:yourthemenameBefehl bereinigen kann, aber ich execdenke, der Befehl sollte dies ohne Fehler tun.
Darren Felton
1
Ich habe festgestellt, dass zahlreiche Dateien in dev/tools/grunt/configsa ausgeführt werden require('./themes'), Beispiele sind clean.jsund exec.jsin diesem Konfigurationsverzeichnis. Was mich glauben lässt, dass diesen Dateien dann unser neu hinzugefügtes Thema fehlen wird themes.yourthemename.js. Trotzdem funktioniert dieses Setup. Ich kann die Ursache meines Required config property "clean.yourthemename" missing.Fehlers einfach nicht bestimmen ...
Darren Felton
2

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-basePakets werden die Datei Gruntfile.jsund der Ordner dev/toolsaus dem Paket in Ihren Stammordner kopiert, wobei alle vorhandenen Dateien überschrieben werden, was durch die Magento2-Basiszuordnung verursacht wird composer.json(siehe vendor/magento/magento2-base/composer.jsonin Ihrem Projekt):

{
    "extra": {
        "map": [
            [
                "dev/tools",
                "dev/tools"
            ],
            [
                "Gruntfile.js",
                "Gruntfile.js"
            ]
        ]
    }
}

Sie können Ihre Versionen von Gruntfile.jsund dev/tools/grunt/configs/themes.jsirgendwo platzieren (wir haben sie in unsere Build-Verzeichnisstruktur eingefügt build/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-cmdEreignis von Composer anschließen, um unsere Versionen dieser Dateien über die Kerndateien von Magento zu kopieren. Sie sollten dies zu Ihrem Projekt hinzufügen composer.json:

{
    "scripts": {
        "post-install-cmd": "cp -vfp build/tools/grunt/Gruntfile.js . && cp -vfp build/tools/grunt/themes.js dev/tools/grunt/configs/"
    }
}

Dies wird Ihnen zeigen:

> cp -vfp build/tools/grunt/Gruntfile.js . && cp -vfp build/tools/grunt/themes.js dev/tools/grunt/configs/
build/tools/grunt/Gruntfile.js -> Gruntfile.js
build/tools/grunt/themes.js -> dev/tools/grunt/configs/themes.js


Theme als Composer-Modul

Genau wie das magento/magento2-basePaket 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.jsonDatei Ihres Themas ein :

{
    "extra": {
        "map": [
            [
                "dev/tools/grunt/configs/themes.js",
                "dev/tools/grunt/configs/themes.js"
            ],
            [
                "Gruntfile.js",
                "Gruntfile.js"
            ]
        ]
    }
}

Stellen Sie sicher, dass der erste Pfad auf die richtige Stelle in Ihrem Themenpaket zeigt. Die Pfade sind relativ zum Speicherort der composer.jsonThemendatei.


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.

7ochem
quelle
2
  • Dies ist eine ergänzende Antwort auf die Antwort von Jev Mokrousov.
  • Geschrieben für Magento 2.1 (Mir wurde gesagt, dass Magento 2.2 bessere Lösungen dafür haben wird)

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.jsDatei. 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).

'use strict';

// If your theme's parent has it's own "themes.someOtherName.js" file, 
// require that file instead of Magento's native "themes.js" file.
var defaultThemes   = require('./themes'),
    _               = require('underscore');

// Update "blank" to the name of your parent theme's Grunt config.
// Update "<vendor>/<yourThemeName>"
var yourThemeNameConfig = _.extend(defaultThemes.blank, {name:'<vendor>/<yourThemeName>'});

// Change this to add your root files, add more as necessary
yourThemeNameConfig.files.push('css/new-file');

// Change "yourThemeName" to what you want to reference in your Grunt command.
module.exports = _.extend(defaultThemes, { yourThemeName: yourThemeNameConfig });
Darren Felton
quelle