Magento 2はコアファイルを変更せずに新しいテーマを追加します。うなり声

Gruntfile.jsやなどのコアファイルに触れたり編集したりせずにデフォルトのMagento 2 Grunt設定を拡張する方法はdev/tools/grunt/configs/themes.js？

Magento 2の新しいテーマを作成することは、以前にMagentoを使用した経験があるとしても、困難な場合があります。まともな開発者はコアMagentoファイルを変更せず、代わりに「ラッパー」を作成します。そのため、将来のパッチのインストールや更新では、すべての変更が上書きされたり、誤ってマージされたりすることはありません。

Gruntfile.jsおよびthemes.jsファイルを拡張する

新しいテーマを作成したとしましょう。ドキュメントMagento 2のドキュメントからわかるようにdev/tools/grunt/configs/themes.js、テーマをリストに追加するファイルを変更する必要があるため、Gruntはpub/staticフォルダーにファイルをコンパイル/シンボリックリンク/ CSS /レスファイルをコンパイルできます。

ステップ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のソリューションは、あなたに合わない、あなたが試みることができる2つの選択肢があります：

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イベントの前または後に追加のコマンドまたはスクリプトを追加する可能性があります。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ます。ここでは、ファイルに提供される若干異なる構文をいくつか示します。テーマの構成を最初から完全に定義するのではなく、親から継承して、新しいもの/異なるものを追加/変更します。

この例では、ブランクの構成から継承し、テーマ名を設定し、テーマの追加ルートファイルを追加しています。これの利点は、親テーマからすべてのファイルを具体的に宣言する必要がないことです。定期的に更新を受け取る親テーマを拡張する人にとって、これは有益な場合があります。（ここでの私のシナリオ例としてブランクを使用することは、おそらく最も適切な状況ではありませんが、ここで適用される概念が重要です）。

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