Как расширить стандартную конфигурацию 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
exec:yourthemename
, ты получаешьWarning: Required config property "clean.yourthemename" missing. Used --force, continuing.
?? Странно, что я могу очистить свою тему с помощьюclean:yourthemename
команды, но я чувствую, чтоexec
команда должна сделать это без ошибок.dev/tools/grunt/configs
выполненияrequire('./themes')
, примерыclean.js
иexec.js
внутри этого каталога конфигурации. Что приводит меня к мысли, что в этих файлах будет отсутствовать наша недавно добавленная темаthemes.yourthemename.js
. Тем не менее, эта настройка работает, я просто не могу определить причину моейRequired config property "clean.yourthemename" missing.
ошибки ...Если решение Джева Мокроусова не подходит вам, вы можете попробовать две альтернативы:
Composer после установки команды
Во время установки
magento/magento2-base
пакета файлGruntfile.js
и папкаdev/tools
будут скопированы из пакета в вашу корневую папку с перезаписью любых существующих файлов, вызванных отображением базы Magento2composer.json
(см.vendor/magento/magento2-base/composer.json
В вашем проекте):Вы можете разместить свои версии
Gruntfile.js
иdev/tools/grunt/configs/themes.js
где-нибудь (мы поместили их в нашу структуру каталогов сборкиbuild/tools/grunt/
).Теперь есть возможность добавлять дополнительные команды или сценарии до или после определенных событий Composer. Мы можем подключиться к
post-install-cmd
событию Composer, чтобы скопировать наши версии этих файлов поверх основных версий Magento. Вы должны добавить это к вашему проектуcomposer.json
:Это покажет вам:
Тема как модуль Композитор
Так же, как
magento/magento2-base
пакет отображает файлы в корневой каталог проекта (как описано выше), вы также можете сделать это самостоятельно.Вы можете поместить свою тему в отдельный пакет Composer. Вам нужно будет создать отдельный репозиторий для этого. Документы Magento уже описывают этот процесс: см. «Сделайте свою тему пакетом Composer»
Теперь добавьте это в
composer.json
файл вашей темы :Убедитесь, что первый путь указывает на правильное место в вашем пакете темы. Пути являются относительными от местоположения
composer.json
файла темы .Предупреждение:
оба решения перезаписывают основные файлы. Это может вызвать проблемы с исправлением или обновлением. При исправлении и обновлении вы всегда должны проверять, что будет изменено, и применять эти изменения к своим копиям этих основных файлов.
источник
Так как я уверен, что многие люди расширят родительскую тему, а не построят ее с нуля, вот вам немного другой синтаксис, предлагаемый для вашего
themes.yourThemeName.js
файла. Вместо того, чтобы полностью определить конфигурацию для нашей темы с нуля, мы наследуем ее от родителя, а затем добавляем / изменяем то, что является новым / другим.В этом примере мы наследуем от конфигурации blank, устанавливая имя нашей темы и добавляя дополнительные корневые файлы нашей темы. Преимущество этого заключается в том, что вам не нужно специально объявлять все файлы из родительской темы. Для людей, расширяющих родительскую тему, которые периодически получают обновления, это может быть полезно. (Использование пустого сценария в качестве моего примера здесь, вероятно, не самая подходящая ситуация, но важны применяемые здесь концепции).
источник