あなたのフロントエンドを速くする方法

この記事はもともと投稿されたmy personal blog
それがビルトイン多くの機能とともに来るように、Magento 2は大きな電子商取引プラットホームです.それはストアの所有者が正確に自分のニーズに合うストアを作成することが容易になります.
しかし、Magentoで開発することは痛みを伴うことができます、それが学ぶのが簡単でないとき、そして、あなたがするときでも、特にフロントエンド開発のために多くのマイナーな変化のために必要とされる構築または編集がたくさんあります.
ここでおばあちゃんが来るところです.Gruntは、コンパイル、minificationなどのような繰り返しタスクを自動化するのに役立ちますJavaScriptタスクランナーです.
我々はMagentoがGruntのボックスコマンドを使用する方法と、どのように我々の開発を速くするために我々自身を加える方法について行きます.

インストールする
あなたがいないならばgrunt-cli グローバルにインストールするには、次のコマンドでインストールする必要があります.

npm install -g grunt-cli

許可が拒否された場合、コマンドを実行する必要がありますsudo またはWindowsでは、PowerShellまたはコマンドプロンプトを管理者として実行する必要があります.

MagentoをGruntで設定する
Magentoプロジェクトディレクトリを見ると、rootで2つのファイルがあります.package.json and package.json.sample . あなたが開くならばpackage.json , 以下のような空のJSONオブジェクトになります.

{}

でもオープンならpackage.json.sample , あなたは、適切なを見つけるpackage.json これは次のようになります.

{
    "name": "magento2",
    "author": "Magento Commerce Inc.",
    "description": "Magento2 node modules dependencies for local development",
    "license": "(OSL-3.0 OR AFL-3.0)",
    "repository": {
        "type": "git",
        "url": "https://github.com/magento/magento2.git"
    },
    "homepage": "http://magento.com/",
    "devDependencies": {
        "glob": "~7.1.1",
        "grunt": "~1.0.1",
        "grunt-autoprefixer": "~3.0.4",
        "grunt-banner": "~0.6.0",
        "grunt-continue": "~0.1.0",
        "grunt-contrib-clean": "~1.1.0",
        "grunt-contrib-connect": "~1.0.2",
        "grunt-contrib-cssmin": "~2.2.1",
        "grunt-contrib-imagemin": "~2.0.1",
        "grunt-contrib-jasmine": "~1.1.0",
        "grunt-contrib-less": "~1.4.1",
        "grunt-contrib-watch": "~1.0.0",
        "grunt-eslint": "~20.1.0",
        "grunt-exec": "~3.0.0",
        "grunt-jscs": "~3.0.1",
        "grunt-replace": "~1.0.1",
        "grunt-styledocco": "~0.3.0",
        "grunt-template-jasmine-requirejs": "~0.2.3",
        "grunt-text-replace": "~0.4.0",
        "imagemin-svgo": "~5.2.1",
        "load-grunt-config": "~0.19.2",
        "morgan": "~1.9.0",
        "node-minify": "~2.3.1",
        "path": "~0.12.7",
        "serve-static": "~1.13.1",
        "squirejs": "~0.2.1",
        "strip-json-comments": "~2.0.1",
        "time-grunt": "~1.4.0",
        "underscore": "~1.8.0"
    }
}

それで、我々は電流を取り除きますpackage.json :

rm package.json

その後、package.json.sample to package.json :

mv package.json.sample package.json

その後、NPMを使用して依存関係をインストールします.

npm install

インストールが完了すると、Gruntを実行するために必要なすべての依存関係を持つ新しいNodeThangモジュールディレクトリがあります.
次のステップはセットアップすることですGruntfile.js これはgruntによって実行されるタスクを保持します.あなたが見つけるGruntfile.js.sample rootディレクトリでは、次のように変更しなければなりませんGruntfile.js :

mv Gruntfile.js.sample Gruntfile.js

デフォルトでは、次のタスクはgruntで定義されているタスクの一つです.

デフォルト:端末のデフォルトメッセージを示します.

clean :キャッシュまたは生成されたファイルを保持するディレクトリを消去します.

展開:静的ファイルを生成します.

リフレッシュ:キャッシュを消去し、生成された静的ファイルを更新します.

通常、Magentoでは、モジュールやテーマをJavaScriptやCSSファイルなどの資産に変更する場合、以下のコマンドを実行してファイルの変更を表示する必要があります.
PHP bin/magento setup :静的コンテンツ
Magentoは開発においてこれが不必要であると主張します.そして、それは我々が- Fを使う理由です、しかし、あなたがMagentoを使用したならば、あなたはこれが実は真実でないということを知っています、そして、あなたがあなたが作った変更を見る必要があるときはいつでも、この命令を実行する必要があります.
実際には、そのコマンドを実行する前に、おそらくディレクトリを削除する必要がありますvar/cache or var/page_cache , または、キャッシュをクリアしてフラッシュするコマンドを実行する必要があります.
すべてのこれらの異なるコマンドを実行することはそのような面倒でありえます、そして、これはgruntが入るところです.単純なコマンドですべてを行うことができます.

grunt refresh

このコマンドは最初にきれいなコマンドを実行します.そして、それはキャッシュを持っているすべてのディレクトリをクリアします、そして、それから、すべてのテーマと彼らの資産をコンパイルします.

カスタムテーマのコンパイル
gruntは、宣言されているテーマをコンパイルしますdev/tools/grunt/configs/themes.js . テーマの宣言は次のようになります.

blank: {
        area: 'frontend',
        name: 'Magento/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },

ご覧の通り、オブジェクトのキーはテーマの名前です.次のプロパティーがあります.

area : ここで、テーマが適用されます.フロントエンド、adminhtml、またはdocです.

name : この形式のテーマの名前VENDOR_THEME .

locale : テーマのロケール.

files : これらはコンパイルされるテーマのファイルです.
5 .dsl : 動的なスタイルシート言語の略であり、以下のいずれか

だから、あなたのテーマがgruntリフレッシュを実行してコンパイルされることを確認するには、あなたのテーマに基づいてプロパティの値を使用して、このオブジェクトにテーマを追加する必要があります.

カスタムタスクの追加
我々が行く次の部分は、我々の開発をより速くするのを助けるGruntでカスタムメイドの仕事をつくる方法です.
自動化できる1つのユースケースは、モジュールのバージョンを更新するときです.通常、3つの異なるタスクを実行する必要があります.

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f

これらのタスクをすべて実行するアップグレードという新しいタスクを作成します.
新しいタスクを作成するには、新しいファイルを作成する必要がありますdev/tools/grunt/tasks . 新しいファイルを作成しますupgrade.js .
ファイルはパラメータとしてgruntを取る関数をエクスポートします:

module.exports = function(grunt) {
    //TODO code for the task
};

その理由はGruntfile.js タスクディレクトリ内のすべてのファイルを取得し、grunt .
次に、いくつかの関数を宣言します.

const exec = require('child_process').execSync,
        log = grunt.log.write,
        ok = grunt.log.ok

exec : それは実際に関数execSync これによりシェルで実行するコマンドを実行できます.上記のコマンドを実行するために使用します.

log : 情報メッセージを出力できる機能.

ok : 成功したメッセージを出力できる機能.

次に、我々の仕事を登録するために、我々は使用しますgrunt.registerTask これは2つのパラメータをとります.タスクの名前と、タスクが一度実行される関数です.

grunt.registerTask('upgrade', function () {
});

タスクが最初に行うべきことはコマンドを実行することですphp bin/magento setup:upgrade . execを使って実行します.

log('Running setup:upgrade...')
exec('php bin/magento setup:upgrade', {stdio: 'inherit'})

最初のパラメータは実行するコマンドで、2番目のパラメータはオプションオブジェクトです.我々が通過しているオプションはstdio 値付きでinherit , これは、出力がタスクを呼び出している端末に出力されることを意味します.
次に、コマンドを実行する必要がありますphp bin/magento setup:di:compile . また、使用しますexec こうする

log('Running setup:di:compile')
exec('php bin/magento setup:di:compile', {stdio: 'inherit'})

最後に、コマンドを実行する必要がありますphp bin/magento setup:static-content:deploy -f . それを実行する代わりにexec , 我々は、別の鈍いタスクを実行しますdeploy タスクはすでに宣言されており、私たちのためのすべての作業を行います.

log('Running deploy...')
grunt.task.run('deploy')
ok('Upgrade finished!')

我々は、鈍い仕事を実行しますgrunt.task.run タスクの名前を渡します.結局、我々はちょうど我々の仕事がされることを示すために、成功したメッセージを出力しています.
それだ!upgrade.js 次のようになります.

module.exports = function(grunt) {
    const exec = require('child_process').execSync,
        log = grunt.log.write,
        ok = grunt.log.ok

    grunt.registerTask('upgrade', function () {
        log('Running setup:upgrade...')
        exec('php bin/magento setup:upgrade', {stdio: 'inherit'})
        log('Running setup:di:compile')
        exec('php bin/magento setup:di:compile', {stdio: 'inherit'})
        log('Running deploy...')
        grunt.task.run('deploy')
        ok('Upgrade finished!')
    });
}

テストしましょう.端末の実行時:

grunt upgrade

すべてが正しく行われる場合、タスクはすべての3コマンドを実行します.このタスクは、新しい、または更新モジュールのためにアップグレードする必要が次回簡単になります!
今、同じプロセスで任意のタスクを自動化することができます.ファイルを作成するdev/tools/grunt/tasks その関数は、grunt パラメータとして.関数の内部で、タスクを登録するgrunt.registerTask そして、あなたは内側に必要な機能を追加できます.

結論
Magentoとグラントを使用して、あなたの開発を迅速かつ容易になるように多くのタスクを自動化することができます!私は、一旦あなたがMagentoでGruntを使い始めるならば、それが非常に有益であるように、あなたがあなたのすべてのプロジェクトのためにつくるすべての仕事をしておくことを提案します.