Magento 2 додайте нову тему без зміни основних файлів. Грунт

Як розширити конфігурацію Magento 2 Grunt за замовчуванням без торкання / редагування основних файлів, таких як Gruntfile.jsі dev/tools/grunt/configs/themes.js?

Створення нової теми для Magento 2 може бути проблемою, навіть маючи досвід роботи з Magento раніше. Достойні розробники не змінять основні файли Magento, а натомість створюють "обгортки", тож у майбутньому встановлюючи патчі та роблячи оновлення, у вас не виникне ситуації, коли всі ваші зміни будуть замінені або об'єднані неправильно.

Розширення файлів Gruntfile.js і themes.js

Скажімо, ви створили нову тему, і як ми знаємо з документації Magento 2 документів, вам потрібно буде змінити файл, dev/tools/grunt/configs/themes.jsдодавши вашу тему до списку, щоб Grunt міг компілювати / symlink / скопіювати файли css / менше в pub/staticпапку.

Крок 1. Створіть /dev/tools/grunt/configs/themes.yourthemename.jsфайл, який розширює themes.jsфайл за замовчуванням як

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

Крок 2: Розгорніть Gruntfile.jsфайлGruntfile.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);

Крок 3: Тепер ви можете запускати завдання Grunt для своєї теми, наприклад:

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

Коли рішення Джева Мокроусова вам не підходить, ви можете спробувати два варіанти:

Команда встановлення команди композитора

Під час встановлення magento/magento2-baseпакету файл Gruntfile.jsі папка dev/toolsбудуть скопійовані з пакету у вашу кореневу папку, перезаписуючи всі наявні файли, викликані базовим composer.jsonвідображенням Magento2 (див. vendor/magento/magento2-base/composer.jsonУ вашому проекті):

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

Ви можете розмістити свої версії Gruntfile.jsта dev/tools/grunt/configs/themes.jsдесь (ми розмістили їх всередині нашої структури каталогу збірок build/tools/grunt/).

Тепер є можливість додавати додаткові команди чи сценарії до або після певних подій композитора. Ми можемо підключитися до post-install-cmdподії композитора, щоб скопіювати наші версії цих файлів на основні Magento. Ви повинні додати це до свого проекту composer.json:

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

Це покаже вам:

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

Тема як модуль композитора

Так само, як magento/magento2-baseпакет відображає файли в корінь проекту (як описано вище), ви також можете зробити це самостійно.

Ви можете розмістити свою тему в окремому пакеті Composer. Для цього вам потрібно буде створити окремий сховище. Документи Magento вже описують цей процес: див. "Зробіть свою тему пакетом композиторів"

Тепер додайте це у файл теми composer.json:

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

Переконайтеся, що перший шлях вказує на потрібне місце у вашому тематичному пакеті. Шляхи відносні від місця розташування composer.jsonфайлу теми .

Попередження:
обидва рішення перезаписують основні файли. Це може спричинити проблеми з виправленням або оновленням. Під час виправлення та оновлення ви завжди повинні перевірити, що буде змінено, і застосувати ці зміни до своїх копій цих основних файлів.

• Це додаткова відповідь на відповідь Єв Мокроусова.
• Написано для Magento 2.1 (мені кажуть, що Magento 2.2 матиме кращі вбудовані рішення для цього)

Оскільки я впевнений, що багато людей знайдуть розширення батьківської теми, а не повністю побудову теми з нуля, ось дещо інший синтаксис, запропонований для вашого themes.yourThemeName.jsфайлу. Замість того, щоб повністю визначити з нуля конфігурацію для нашої теми, ми успадковуємо її від батьківського, а потім додаємо / змінюємо те, що є новим / різним.

У цьому прикладі ми успадковуємо конфігурацію порожнього, встановлюємо ім’я теми та додаємо додаткові кореневі файли нашої теми. Користь для цього полягає в тому, що вам не потрібно спеціально декларувати всі файли з батьківської теми. Для людей, які продовжують батьківську тему, яка періодично отримує оновлення, це може бути корисним. (Використання порожнього в якості мого прикладу сценарію тут, мабуть, не є найбільш застосовною ситуацією, але тут застосовано поняття, що важливо).

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