＆＃039;は、マリー・コンドの組織治療をgruntに任せてください

WebpackおよびNPMスクリプトは、最新のJavaScript開発、タスクの処理、バンドルを支配しています。ただし、多くのプロジェクトは依然としてうなり声に依存しています。ブロックの最新の子供ではありませんが、グラントは信頼できる主力のままです。この記事では、既存のうなり声プロジェクトを合理化および改善するための戦略について説明します。

jit-gruntを使用したスーパーチャージングタスク

grunt.loadNpmTasksを使用して各gruntタスクを手動で読み込むことは退屈です。 load-grunt-tasksは自動化を提供しますが、 jit-gruntさらに速いパフォーマンスを提供します。特に、より大きなプロジェクトに有益です。

パフォーマンスの比較：

jit-gruntなし：

 <code>loading tasks 5.7s ▇▇▇▇▇▇▇▇ 84% assemble:compile 1.1s ▇▇ 16% Total 6.8s</code>

jit-gruntで：

 <code>loading tasks 111ms ▇ 8% loading assemble 221ms ▇▇ 16% assemble:compile 1.1s ▇▇▇▇▇▇▇▇ 77% Total 1.4s</code>

大幅な速度改善！ jit-grunt 、必要に応じてタスクを読み込むことでこの最適化を実現します。

jit-gruntの使用：

1. インストール： npm install jit-grunt --save
2. タスクの読み込みステートメントを置き換えます。

 module.exports = function（grunt）{
  //個々のgrunt.loadnpmtasks呼び出しの代わりに...
  require（ 'jit-grunt'）（grunt）;

  grunt.initconfig（{}）;
}

構成の読み込みを合理化します

次のステップは、グラントファイルをより小さく、より管理しやすい構成ファイルに分離することです。 Monolithic gruntfile.jsの代わりに、構成を個別のファイルに整理します。効率的なロードにはload-grunt-configsを使用します。

load-grunt-configsの使用：

 module.exports = function（grunt）{
  require（ 'jit-grunt'）（grunt）;

  const configs = require（ 'load-grunt-configs'）（grunt、{
    config：{src： 'tasks/*。js'}
  }）;

  grunt.initconfig（configs）;
  grunt.registertask（ 'default'、['cssmin']）;
}

または、Gruntはネイティブタスクの読み込みを提供します： grunt.loadTasks('tasks') 。ただし、これはすぐにファイルを実行し、構成に理想的ではありません。これを活用するには、 grunt.configを使用して外部ファイル内のタスクを構成する必要があります。

grunt.loadTasksを使用した例：

 // tasks/mytask.js
module.exports = function（grunt）{
  grunt.config（ 'mytask'、{
    オプション：「値」
  }）;
};

// gruntfile.js
module.exports = function（grunt）{
  require（ 'jit-grunt'）（grunt）;
  grunt.initconfig（{}）;
  grunt.loadtasks（ 'tasks'）;
  grunt.registertask（ 'default'、['mytask']）;
};

高度な構成組織：機能ごとのグループ

ファイル名によるタスクの整理は、必ずしも直感的ではありません。より効果的なアプローチは、機能または機能によって構成をグループ化することです。

多数の個別のタスクファイルの代わりに、機能を表すファイルを作成します（例えば、 styles.js 、 scripts.js 、 images.js ）。 grunt.config.mergeを使用して、関連するタスクの構成を組み合わせて、上書きを回避します。

例：スタイル構成：

 // tasks/styles.js
module.exports = function（grunt）{
  grunt.config（ 'sass'、{ / * ... * /}）;
  grunt.config（ 'postcss'、{ / * ... * /}）;
  grunt.config.merge（{
    時計： {
      スタイル：{
        ファイル：['ソース/スタイル/*。scss']、
        タスク：['sass'、 'postcss']
      }
    }
  }）;
};

このアプローチは、読みやすさと保守性を向上させ、プロジェクトの構造のより明確な概要を提供します。

結論

最新のテクノロジーではありませんが、Gruntは適切な組織を持つ実行可能なオプションのままです。 jit-grunt 、 load-grunt-configs （または慎重なタスク定義を備えたgrunt.loadTasks ）、および機能ベースの構成構造を活用することにより、Gruntプロジェクトの効率と保守性を大幅に改善できます。詳細と可能性については、Gruntドキュメントを参照してください。

以上が＆＃039;は、マリー・コンドの組織治療をgruntに任せてくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。