Magento 2无需更改核心文件即可添加新主题。咕unt声

如何扩展默认的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可以将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

当Jev Mokrousov的解决方案不适合您时，您可以尝试两种选择：

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目录结构里面build/tools/grunt/）。

现在可以在某些Composer事件之前或之后添加额外的命令或脚本。我们可以参与Composer的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’

主题作为Composer模块

就像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文件的位置开始是相对的。

警告：
两种解决方案都将覆盖核心文件。这可能会导致补丁或升级问题。修补和升级时，您应该始终检查要更改的内容，并将这些更改应用于这些核心文件的副本。

• 这是对Jev Mokrousov的回答的补充回答。
• 为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 });