js モジュール開発—Gruntfile.js の詳細な説明

1. grunt モジュールの概要

grunt プラグインは、npm 環境の自動化ツールです。圧縮、コンパイル、単体テスト、lint チェックなど、繰り返し行う必要があるタスクの場合、自動化ツールを使用すると労力が軽減され、作業が簡素化されます。 grunt モジュールは、Gruntfile.js ファイル内の設定に基づいてタスクを実行します。
次のコマンドが package.json で定義されている場合:

[関連コースの推奨事項: JavaScript ビデオ チュートリアル]

"scripts": {
    "build": "npm install && grunt"
}

Because runningnpm run build devDependency で定義された一部のモジュールが最初にインストールされ、その後、npm run build コマンドを実行することは、次の操作と同じです:

#● npm install grunt-cli -g

● npm install

# grunt

2. gruntfile.js の構造:

● "wrapper" 関数

● プロジェクトとタスクの構成

#Grunt プラグインとタスクのロード

##● カスタム タスク

##3.「ラッパー」関数

##Gruntfile の各コピー.js (および grunt プラグイン) は同じ形式に従います。作成する Grunt コードは、この関数内に配置する必要があります:

module.exports = function(grunt){
         //do grunt-related things in here
}

4. プロジェクトとタスクの構成

ほとんどすべての Grunt タスクは特定の構成データに依存しており、Grunt タスクのパラメーターは grunt.initConfig メソッドを通じて構成されます。 grunt.initConfig メソッドのパラメータは JSON オブジェクトであり、この設定オブジェクトには任意のデータを保存できます。さらに、これは JavaScript であるため、ここでは任意の有効な JS コードを使用できます。 <% %> テンプレート文字列を使用して、すでに設定されているプロパティを参照することもできます (例:

// 项目和任务配置
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'), //获取 package.json 中的元数据(js代码)
  proj:{
    name:'hello',
    description:'a hello demo'
  },
  hello: {
    options: {
      name: '<%= proj.name %>'  //用<% %>模板字符串匹配hello
    },
    srcs: ['1.txt', '2.txt']
  }
});

タスク モジュールの grunt.initConfig メソッドで設定されたプロパティは、grunt.config を使用できます)メソッドにアクセスするには、たとえば:

grunt.config("proj.name");

さらに、grunt タスク モジュールは、タスク名に基づいて構成オブジェクト内のタスク名に対応する属性を自動的に抽出します。たとえば、タスク hello を定義すると、 、次に、設定オブジェクトに対応する属性「hello」に、タスク実行機能に必要な設定とデータを設定します。

5. grunt プラグイン タスクのロード

作業の重複を減らすために、既存のプラグイン タスクをロードできます。

1. 独自のプライベート grunt プラグインをロードする

独自に定義したタスク スクリプトの一部を同じディレクトリに配置し、指定したディレクトリからロードできます。 grunt.loadTasks メソッド このディレクトリ内のすべての grunt タスク スクリプト。

2. npm で公開されている grunt プラグインをロードします

grunt-contrib-copy や grunt-contrib-uglify などの一般的なタスクは、grunt プラグインとして実装されています。 ins フォームは npm パブリック ライブラリで開発および公開されています。使用するプラグインが package.json ファイルの依存関係にリストされており、npm install を通じてインストールされている限り、タスクを直接読み込むことができます。

// 加载能够提供"copy"任务的插件。
grunt.loadNpmTasks('grunt-contrib-copy');

3.「grunt-」で始まるすべてのプラグインを直接ロードします。

npm には使用できるload-grunt-tasks プラグインがあります。 「grunt-」で始まる依存関係リストのプラグインをすべてロードします。 依存関係の「grunt-」で始まる使用する必要のあるプラグインをリストし、Gruntfile.js でそれらを呼び出します。

//Load grunt tasks from NPM packages
load-grunt-tasks

6. カスタム タスク

1. タスクの動作を直接定義します

grunt.registerTask('hello', 'Show some msg', function() {
  console.log(this.options().name); //输出hello
});

2。定義 タスク リスト

の場合、タスクは、順番に実行される一連のタスクの組み合わせとして定義できます。

grunt.registerTask('dothings', 'copy and Show some msg', ['copy','hello']);

3. デフォルト タスクを定義する

デフォルト タスクを定義することで、Grunt に 1 つ以上のタスクをデフォルトで実行させることができます。 grunt コマンドの実行時にタスクを指定しない場合は、デフォルトのタスクが実行されます。以下に定義されている場合、grunt の実行は grunt hello の実行と同じです。

grunt.registerTask('default', ['hello']);

4. 複合タスクの定義

registerMultiTask メソッドは複合タスクを定義できます。複合タスクは、オプションを除き、grunt.initConfig メソッドで設定された対応する属性を設定します。定義された属性は、target:data のペアとして順番に処理されます。

module.exports = function(grunt) {
    grunt.initConfig({
        Log: {
            options: {
                sep: ';'
            },
            srcs: ['1.txt', '2.txt'],
            dests: ['d1.txt', 'd2.txt']
        }
    });
    grunt.registerMultiTask("Log", function() {
        var options = this.options({ sep: '&' });
        console.log(this.target); 
        console.log(this.data.join(options.sep));
    });
};

grunt ログを実行すると、次の内容が出力されます:

Running "Log:srcs" (Log) task
srcs
1.txt;2.txt
Running "Log:dests" (Log) task
dests
d1.txt;d2.txt

定义任务行为Tips

1.任务内部可以执行其他的任务。

grunt.registerTask('mytask', function() {
  grunt.task.run('task1', 'task2');
  // Or:
  grunt.task.run(['task1', 'task2']);
});

2.定义异步任务

grunt.registerTask('mytask', function() {
  var done = this.async();
  //do something
  done();
});

3.当任务失败时，所有后续任务都将终止

在任务中，当执行失败，可以return false来表明当前任务执行失败，一般，多个任务按顺序执行，如果有任务失败时，所有后续任务都将终止。可以通过在命令行后加上--force来使有任务失败时，后续任务能继续进行。

4.任务中检查前置任务状态

有些任务可以依赖于其他任务的成功执行。通过grunt.task.requires方法来检查其前置任务是否已经执行，并且没有失败。

5.任务中检查配置属性

可以用方法grunt.task.requiresConfig指定一个或者多个字符串或者数组的配置属性为必需的。如果一个或多个必需的配置属性缺失，就通知系统当前任务失败。

本文来自 js教程 栏目，欢迎学习！  

以上がjs モジュール開発—Gruntfile.js の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。