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

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?

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

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.

• 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 });