Magento 2 dodaje nowy motyw bez zmiany podstawowych plików. Chrząknięcie

Jak rozszerzyć domyślną konfigurację Magento 2 Grunt bez dotykania / edytowania podstawowych plików, takich jak Gruntfile.jsi dev/tools/grunt/configs/themes.js?

Stworzenie nowego motywu dla Magento 2 może być wyzwaniem, nawet jeśli wcześniej miałeś doświadczenie z Magento. Przyzwoici programiści nie zmieniają podstawowych plików Magento, ale zamiast tego tworzą „opakowania”, więc w przyszłości instalując łatki i wykonując aktualizacje, nie będziesz mieć sytuacji, gdy wszystkie twoje zmiany zostaną zastąpione lub niepoprawnie scalone.

Rozszerz pliki Gruntfile.js i themes.js

Załóżmy, że utworzyłeś nowy motyw i jak wiemy z dokumentacji Magento 2 doc , będziesz musiał zmienić plik dev/tools/grunt/configs/themes.jsdodając motyw do listy, aby Grunt mógł skompilować / symlink / skopiować css / mniej plików do pub/staticfolderu.

Krok 1: Utwórz /dev/tools/grunt/configs/themes.yourthemename.jsplik, który rozszerza domyślny themes.jsplik jako

'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);

Krok 2: Rozszerz za Gruntfile.jspomocą plikuGruntfile.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);

Krok 3: Teraz możesz uruchomić zadania Grunt dla swojego motywu, takie jak:

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

Kiedy rozwiązanie Jev Mokustyova ci nie pasuje, możesz wypróbować dwie alternatywy:

Polecenie kompozytora po instalacji

Podczas instalacji magento/magento2-basepakietu plik Gruntfile.jsi folder dev/toolszostaną skopiowane z pakietu do folderu głównego, zastępując wszystkie istniejące pliki, spowodowane przez podstawowe composer.jsonmapowanie Magento2 (patrz vendor/magento/magento2-base/composer.jsonw projekcie):

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

Możesz umieścić swoje wersje Gruntfile.jsi dev/tools/grunt/configs/themes.jsgdzieś (umieściliśmy je w naszej strukturze katalogu kompilacji build/tools/grunt/).

Teraz istnieje możliwość dodania dodatkowych poleceń lub skryptów przed lub po określonych zdarzeniach Composer. Moglibyśmy dołączyć do post-install-cmdwydarzenia Kompozytora, aby skopiować nasze wersje tych plików na podstawowe Magento. Powinieneś dodać to do swojego projektu composer.json:

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

To pokaże ci:

> 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’

Motyw jako moduł kompozytora

Podobnie jak magento/magento2-basepakiet mapuje pliki do katalogu głównego projektu (jak opisano powyżej), możesz to zrobić sam.

Możesz umieścić swój motyw w osobnym pakiecie kompozytora. W tym celu musisz utworzyć osobne repozytorium. Dokumenty Magento już opisują ten proces: patrz „Zrób swój motyw jako pakiet kompozytora”

Teraz dodaj to do composer.jsonpliku swojego motywu :

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

Upewnij się, że pierwsza ścieżka wskazuje właściwą lokalizację w pakiecie motywów. Ścieżki są względne od położenia composer.jsonpliku motywu .

Ostrzeżenie:
oba rozwiązania zastępują podstawowe pliki. Może to powodować problemy z łatkami lub aktualizacjami. Podczas łatania i uaktualniania zawsze powinieneś sprawdzić, co będzie zmieniane i zastosować te zmiany w swoich kopiach tych podstawowych plików.

• Jest to dodatkowa odpowiedź na odpowiedź Jev Mokustyova.
• Napisane dla Magento 2.1 (powiedziano mi, że Magento 2.2 będzie miał lepsze wbudowane rozwiązania tego problemu)

Ponieważ jestem pewien, że wiele osób rozszerzy kompozycję nadrzędną zamiast całkowicie budować kompozycję od podstaw, oto nieco inna składnia themes.yourThemeName.jspliku. Zamiast całkowicie definiować od podstaw konfigurację naszego motywu, dziedziczymy go od rodzica, a następnie dołączamy / modyfikujemy to, co nowe / inne.

W tym przykładzie dziedziczymy z konfiguracji pustej, ustawiając nazwę motywu i dodając dodatkowe pliki główne naszego motywu. Zaletą tego jest to, że nie trzeba specjalnie deklarować wszystkich plików z kompozycji nadrzędnej. Może to być korzystne dla osób rozszerzających temat nadrzędny, które okresowo otrzymują aktualizacje. (Użycie pustego miejsca jako mojego przykładowego scenariusza tutaj prawdopodobnie nie jest najodpowiedniejszą sytuacją, ale znaczenie mają tu zastosowane tu pojęcia).

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