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 / copy css / less файлы в 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

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

Composer после установки команды

Во время установки magento/magento2-baseпакета файл Gruntfile.jsи папка dev/toolsбудут скопированы из пакета в вашу корневую папку с перезаписью любых существующих файлов, вызванных отображением базы Magento2 composer.json(см. 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/).

Теперь есть возможность добавлять дополнительные команды или сценарии до или после определенных событий Composer. Мы можем подключиться к post-install-cmdсобытию Composer, чтобы скопировать наши версии этих файлов поверх основных версий 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»

Теперь добавьте это в 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файла. Вместо того, чтобы полностью определить конфигурацию для нашей темы с нуля, мы наследуем ее от родителя, а затем добавляем / изменяем то, что является новым / другим.

В этом примере мы наследуем от конфигурации blank, устанавливая имя нашей темы и добавляя дополнительные корневые файлы нашей темы. Преимущество этого заключается в том, что вам не нужно специально объявлять все файлы из родительской темы. Для людей, расширяющих родительскую тему, которые периодически получают обновления, это может быть полезно. (Использование пустого сценария в качестве моего примера здесь, вероятно, не самая подходящая ситуация, но важны применяемые здесь концепции).

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