Grunt-クイックガイド
グラントとは何ですか？
Gruntは、JavaScriptオブジェクトのコマンドラインツールとして使用できるJavaScriptタスクランナーです。NodeJSの上に書かれたタスクマネージャーです。
なぜGruntを使用するのですか？
Gruntは、コンパイル、単体テスト、ファイルの縮小、テストの実行など、反復的なタスクを非常に簡単に実行できます。
Gruntには、プラグインとスクリプトの機能を拡張する組み込みタスクが含まれています。
グラントの生態系は巨大です。非常に少ない労力で何でも自動化できます。
歴史
ソースコードの最初の行は2011年にGruntJSに追加されました。Gruntv0.4は2013年2月18日にリリースされました。Gruntv0.4.5は2014年5月12日にリリースされました。Gruntの安定バージョンは1.0.0rc1です。 2016年2月11日にリリースされました。
利点
Gruntを使用すると、ファイルの縮小、コンパイル、およびテストを簡単に実行できます。
Gruntは、Web開発者のワークフローを統合します。
インフラストラクチャが少ないため、Gruntを使用して新しいコードベースを簡単に操作できます。
開発ワークフローをスピードアップし、プロジェクトのパフォーマンスを向上させます。
短所
いつでも npm パッケージが更新されると、Gruntの作成者が更新するまで待つ必要があります。
すべてのタスクは、指定された作業を実行するように設計されています。指定されたタスクを拡張したい場合は、いくつかのトリックを使用して作業を完了する必要があります。
Gruntには、個々のプラグイン用の多数の構成パラメーターが含まれています。通常、Grunt構成ファイルの長さは長くなります。
GruntはJavaScriptベースのタスクランナーです。つまり、ワークフロー内の反復タスクを自動化でき、JavaScriptオブジェクトのコマンドラインツールとして使用できます。
GruntJSの最も顕著な機能のいくつかを以下に示します-
Gruntを使用すると、セットアップファイルを作成するのと同じくらい簡単にワークフローを実行できます。
最小限の労力で反復タスクを自動化できます。
Gruntは、NodeJSをベースにした人気のタスクランナーです。柔軟性があり、広く採用されています。
JSのタスクとJSONの構成を含む簡単なアプローチがあります。
Gruntは、JavaScript、CSSファイル、テストファイル、CSSプリプロセッサファイル（SASS、LESS）のコンパイルなどを最小化します。
Gruntには、プラグインとスクリプトの機能を拡張する組み込みタスクが含まれています。
開発ワークフローをスピードアップし、プロジェクトのパフォーマンスを向上させます。
インフラストラクチャが少ないため、Gruntを使用して新しいコードベースを簡単に操作できます。
グラントの生態系は巨大です。非常に少ない労力で何でも自動化できます。
Gruntは、反復的なタスクの実行中にエラーが発生する可能性を減らします。
Gruntには現在4000を超えるプラグインがあります。
大規模な生産現場で使用できます。
この章では、Gruntをシステムにインストールする方法を段階的に説明します。
Gruntのシステム要件
Operating System −クロスプラットフォーム
Browser Support − IE（Internet Explorer 8以降）、Firefox、Google Chrome、Safari、Opera
Gruntのインストール
Step 1−Gruntを実行するにはNodeJが必要です。NodeJをダウンロードするには、リンクを開きますhttps://nodejs.org/en/、以下のような画面が表示されます-
zipファイルの最新機能バージョンをダウンロードします。
Step 2−次に、セットアップを実行して、コンピューターにNodeJをインストールします。
Step 3−次に、環境変数を設定する必要があります。
Path User Variable
- 右クリック My Computer。
- 選択する Properties。
- 次に、 Advanced タブをクリックしてクリックします Environment Variables。
下の環境変数ウィンドウ、ダブルクリックPATH画面のように。
図のように、[ユーザー変数の編集]ウィンドウが表示されます。[変数値]フィールドにNodeJsフォルダーパスをC：\ Program Files \ nodejs \ node_modules \ npmとして追加します。他のファイルのパスがすでに設定されている場合は、その後にセミコロン（;）を付けて、以下に示すようにNodeJsパスを追加する必要があります。
最後に、[ OK ]ボタンをクリックします。
System Variable
下では、システム変数、をダブルクリックパスは、次の画面のように。
図のように、[システム変数の編集]ウィンドウが表示されます。以下に示すように、[変数値]フィールドにNodeJsフォルダーパスをC：\ Program Files \ nodejs \として追加し、[ OK ]をクリックします。
Step 4 −システムにgruntをインストールするには、以下に示すように、Gruntのコマンドラインインターフェイス（CLI）をグローバルにインストールする必要があります。
npm install -g grunt-cli上記のコマンドを実行すると、gruntコマンドがシステムパスに配置され、任意のディレクトリから実行できるようになります。
grunt-cliをインストールしても、Gruntタスクランナーはインストールされません。grunt-cliの役割は、Gruntfileの隣にインストールされているバージョンのGruntを実行することです。これにより、マシンは複数のバージョンのGruntを同時にインストールできます。
Step 5 −さて、作成します configuration files Gruntを実行するために。
package.json
package.jsonのファイルを横にし、プロジェクトのルートディレクトリに置かれGruntfile。package.jsonは、コマンドを実行するたびに正しく記載されている各依存関係を実行するために使用されますnpm install package.jsonと同じフォルダーにあります。
T基本的なpackage.jsonは、コマンドプロンプトで次のコマンドを入力することで作成できます-
npm init基本的なpackage.jsonファイルは次のようになります-
{
"name": "tutorialspoint",
"version": "0.1.0",
"devDependencies": {
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}次のコマンドを使用して、Gruntおよびgruntpluginsを既存のpacakge.jsonファイルに追加できます。
npm install <module> --save-dev上記のコマンドで、<module>はローカルにインストールされるモジュールを表します。上記のコマンドは、<module>をdevDependenciesに自動的に追加します。
たとえば、次のコマンドは最新バージョンのGruntをインストールし、それをdevDependenciesに追加します-
npm install grunt --save-devGruntfile.js
Gruntfile.jsのファイルは、うなり声のための私達の構成を定義するために使用されます。設定が書き込まれる場所です。基本的なGruntfile.jsファイルは次のとおりです-
// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
// CONFIGURE GRUNT
grunt.initConfig({
// get the configuration info from package.json file
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
// all of our configuration goes here
uglify: {
// uglify task configuration
options: {},
build: {}
}
});
// log something
grunt.log.write('Hello world! Welcome to Tutorialspoint!!\n');
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};Gruntを利用するには、Node.jsをインストールする必要があります。Node.jsのインストールについては、前の章で説明しました。Node.jsパッケージマネージャーを使用して、GruntおよびGruntプラグインをインストールできます。
システムにGruntを設定する前に、次のコマンドを使用してノードパッケージマネージャーを更新できます。
npm update -g npmMacまたはLinuxを使用している場合は、コマンドラインの先頭でsudo wordを使用して、以下に示すように管理者アクセスを許可する必要があります。
sudo npm update -g npmCLIのインストール
CLIは、インストールされているバージョンのGruntを実行するコマンドラインインターフェイスの略です。Gruntの使用を開始するには、以下に示すように、Gruntのコマンドラインインターフェイス（CLI）をグローバルにインストールする必要があります。
npm install -g grunt-cli上記のコマンドを実行すると、gruntコマンドがシステムパスに配置され、任意のディレクトリから実行できるようになります。grunt-cliをインストールしてGruntタスクランナーをインストールすることはできません。これにより、マシンは複数のバージョンのGruntを同時にインストールできます。
CLIの動作
CLIは、Gruntが実行されるたびに、require（）システムを使用して、システムにインストールされているGruntを検索します。grunt-cliを使用すると、プロジェクト内の任意のディレクトリからGruntを実行できます。ローカルにインストールされたGruntを使用している場合、grunt-cliはローカルにインストールされたGruntライブラリを使用し、Gruntファイルから構成を適用します。
既存および新規のプロジェクトでの作業
package.jsonとGruntfileを含む構成済みのプロジェクトで作業している場合は、以下に指定されている簡単な手順に従います。
- プロジェクトのルートディレクトリへのパスを見つけます。
- npminstallコマンドを使用して依存関係をインストールできます。
- gruntコマンドを使用してGruntを実行します。
新しいプロジェクトを作成する場合は、package.jsonとGruntfileの2つのファイルをプロジェクトに含めます。
package.json− package.jsonファイルはプロジェクトのルートディレクトリに配置され、同じフォルダーでコマンドnpm installを実行するたびに、リストされている各依存関係を実行するために使用されます。
Gruntfile.js − Gruntfile.jsファイルは、プロジェクトの構成設定を書き込むために使用されます。
package.json
package.jsonのファイルが横に、プロジェクトのルートディレクトリに置かれGruntfileと、コマンドを実行するたびに、それぞれ記載されている依存関係を実行するために使用されるインストールNPM同じフォルダにします。
以下に示すように、さまざまな方法でpackage.jsonを作成できます-
- あなたはできる作男-initはpackage.jsonファイルを作成します。
- npm-initコマンドを使用してpackage.jsonファイルを作成することもできます。
以下のように仕様書を書くことができます−
{
"name": "tutorialspoint",
"version": "0.1.0",
"devDependencies": {
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}次のコマンドを使用して、Gruntとgruntpluginsを既存のpacakge.jsonファイルに追加できます。
npm install <module> --save-devここで、<module>はローカルにインストールされるモジュールを表します。上記のコマンドは、指定されたモジュールをインストールし、それをdevDependenciesセクションに自動的に追加します。
たとえば、次のコマンドは最新バージョンのGruntをインストールし、それをdevDependenciesに追加します-
npm install grunt --save-devGruntfile
Gruntfile.jsのファイルには、構成設定が兵卒のために行くだろう、デフォルトの場所です。Gruntファイルには次の部分が含まれています-
- ラッパー関数
- プロジェクトとタスクの構成
- Gruntプラグインとタスクの読み込み
- カスタムタスク
基本的なGruntfile.jsファイルは次のとおりです-
// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
// CONFIGURE GRUNT
grunt.initConfig({
// get the configuration info from package.json file
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
// all of our configuration goes here
});
// Load the plugin that provides the "uglify" task
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s)
grunt.registerTask('default', ['uglify']);
};ラッパー関数
上記のコードでは、module.exportsは、構成全体がこの関数内に入るラッパー関数です。これは、アプリケーションの残りの部分に構成を表示する方法です。
module.exports = function(grunt) {
//do grunt-related things here
}プロジェクトとタスクの構成
Grunt構成の準備ができたら、Gruntタスクを構成できます。プロジェクト構成は、grunt.initConfig（）セクションに記述できます。grunt.initConfig（）関数内で、package.jsonファイルから構成情報を取得し、pkgに保存します。あなたは使用してプロジェクト名を呼び出すことができますpkg.nameとし、バージョンをpkg.version。
Gruntプラグインとタスクの読み込み
grunt.loadNpmTasksメソッドを使用して、指定したプラグインからタスクをロードします。を使用してプラグインをローカルにインストールできますnpmそしてそれはGruntfileに相対的でなければなりません。以下に示すように、簡単なコマンドでプラグインをロードできます-
grunt.task.loadNpmTasks(pluginName)カスタムタスク
コマンドラインからGruntを実行している場合、Gruntはデフォルトのタスクを探します。上記のコードでは、gruntコマンドを使用して実行できるuglifyというタスクを使用しています。これは、grunt uglifyコマンドを明示的に実行するのと同じであり、配列内のタスクの数を指定できます。
grunt.registerTask('default', ['uglify']);Gruntのプロジェクト固有の構成データはGruntfile.jsファイルで定義できます。
グラント構成
タスク構成データは、grunt.initConfig（）メソッドを使用してGruntfileで初期化できます。grunt.initConfig（）関数内で、package.jsonファイルから構成情報を取得します。構成には、という名前のタスクが含まれますproperties および任意のデータ。
grunt.initConfig({
jshint: {
// configuration for jshint task
},
cssmin: {
// configuration for cssmin task
},
// Arbitrary non-task-specific properties
my_files: ['dir1/*.js', 'dir2/*.js'],
});タスクの構成とターゲット
タスクを実行しているとき、Gruntはtask-namedプロパティの下で構成を探します。以下に示すように、複数の構成とターゲットオプションを使用してタスクを定義します-
grunt.initConfig({
jshint: {
myfile1: {
// configuration for "myfile1" target options
},
myfile2: {
// configuration for "myfile2" target options
},
},
cssmin: {
myfile3: {
// configuration for "myfile3" target options
},
},
});ここで、jshintタスクにはmyfile1およびmyfile2ターゲットがあり、cssminタスクにはmyfile3ターゲットがあります。grunt jshintを実行しているときは、タスクとターゲットの両方を繰り返し処理して、指定されたターゲットの構成を処理します。
オプション
タスクのデフォルトをオーバーライドするタスク構成内のoptionsプロパティを定義します。各ターゲットには、タスクレベルのオプションをオーバーライドするoptionsプロパティが含まれています。次の形式になります-
grunt.initConfig({
jshint: {
options: {
// task-level options that overrides task defaults
},
myfile: {
options: {
// "myfile" target options overrides task defaults
},
},
myfile1: {
// there is no option, target will use task-level options
},
},
});ファイル
Gruntは、タスクが動作するファイルを指定するためのいくつかのアイデアを提供し、さまざまな方法を使用してsrc-destファイルのマッピングを指定します。以下は、srcおよびdestマッピングでサポートされている追加のプロパティの一部です-
filter−一致したsrcファイルパスを指定し、trueまたはfalseの値を返す関数です。
nonull − trueに設定されている場合、一致しないパターンを定義します。
dot −ピリオドなどで始まるファイル名と一致します。
matchBase −パスのベース名とスラッシュを含むパターンに一致します。
expand −src-destファイルのマッピングを処理します。
コンパクトフォーマット
これは、読み取り専用タスクに使用でき、srcプロパティのみを必要とし、destプロパティを必要としない、ターゲットごとのsrc-destファイルマッピングを指定します。
grunt.initConfig({
jshint: {
myfile1: {
src: ['src/file1.js','src/file2.js']
},
},
cssmin: {
myfile2: {
src: ['src/file3.js','src/file4.js'],
dest: 'dest/destfile.js',
},
},
});ファイルオブジェクト形式
これは、プロパティ名がある中で、ターゲットごとのSRC-DESTファイルマッピングを指定するDESTファイルを、その値があるSRCファイル。
grunt.initConfig({
jshint: {
myfile1: {
files: {
'dest/destfile.js':['src/file1.js','src/file2.js'],
'dest/destfile1.js':['src/file3.js','src/file4.js'],
},
},
myfile2: {
files: {
'dest/destfile2.js':['src/file22.js','src/file23.js'],
'dest/destfile21.js':['src/file24.js','src/file25.js'],
},
},
},
});ファイル配列形式
マッピングごとに追加のプロパティを使用して、ターゲットごとのsrc-destファイルマッピングを指定します。
grunt.initConfig({
jshint: {
myfile1: {
files: [
{src:['src/file1.js','src/file2.js'],dest:'dest/file3.js'},
{src:['src/file4.js','src/file4.js'],dest:'dest/file5.js'},
],
},
myfile2: {
files: [
{src:['src/file6.js','src/file7.js'],dest:'dest/file8/', nonull:true},
{src:['src/file9.js','src/file10.js'],dest:'dest/file11/', filter:'isFalse'},
],
},
},
});古いフォーマット
DEST-AS-対象のファイル形式は、先のファイルパスがターゲットの名前であるマルチタスクの存在の前にありました。次の形式は非推奨であり、コードでは使用されません。
grunt.initConfig({
jshint: {
'dest/destfile2.js':['src/file3.js','src/file4.js'],
'dest/destfile5.js':['src/file6.js','src/file7.js'],
},
});カスタムフィルター機能
filterプロパティを使用すると、ターゲットファイルを非常に詳細に支援できます。次の形式は、実際のファイルと一致する場合にのみファイルをクリーンアップします。
grunt.initConfig({
clean: {
myfile:{
src: ['temp/**/*'],
filter: 'isFile',
},
},
});グロブパターン
グロブとは、ファイル名を展開することを意味します。Gruntは、組み込みのnode-globおよびminimatchライブラリを使用してグロブをサポートします。グロブパターンには以下の点が含まれます-
- *任意の数の文字に一致しますが、/には一致しません。
- ？単一の文字に一致しますが、/には一致しません。
- ** /を含む文字数に一致します。
- {}は、「または」式のコンマ区切りリストを指定します。
- ！最初にパターンマッチを無効にします。
例-
{src: 'myfile/file1.js', dest: ...} // it specifies the single file
{src: 'myfile/*.js', dest: ...} //it matches all the files ending wth .js
{src: 'myfile/{file1,file2}*.js', dest: ...} //defines the single node glob pattern
{src: ['myfile/*.js', '!myfile/file1.js'], dest: ...} // all files will display in alpha
// order except for file1.jsファイルオブジェクトを動的に構築する
個々のファイルを操作する場合は、追加のプロパティを使用してファイルリストを動的に作成できます。あなたが設定するときexpand プロパティをtrueにすると、次のプロパティの一部が有効になります-
cwdは、すべてのsrcをこのパスに一致させます。
srcは、cwdを基準にして、一致するパターンと一致します。
destプロパティは、宛先パスプレフィックスを指定します。
extは、既存の拡張機能をdestパスで生成された値に置き換えます。
extDotは、拡張子を示すピリオドが配置されている場所を示します。最初の期間または最後の期間のいずれかを使用します。デフォルトでは、最初の期間に設定されています
flattenは、destパスからすべてのパスパーツを削除します。
renameは、新しい宛先とファイル名を含む文字列を指定します。
名前の変更プロパティ
これは文字列を返す独自のJavaScript関数であり、名前の変更に文字列値を使用することはできません。次の例では、コピータスクによってREADME.mdのバックアップが作成されます。
grunt.initConfig({
copy: {
backup: {
files: [{
expand: true,
src: ['docs/README.md'], // creating a backup of README.md
rename: function () { // specifies the rename function
return 'docs/BACKUP.txt'; // returns a string with the complete destination
}
}]
}
}
});テンプレート
< %% >区切り文字を使用してテンプレートを指定できます。それらは、構成から読み取られるときに自動的に展開されます。2種類のプロパティが含まれています-
<%= prop.subprop %>プロパティは、文字列値、配列、およびその他のオブジェクトを参照できる構成内のprop.subpropの値を展開するために使用されます。
<% %> プロパティは、制御フローまたはループに使用されるインラインJavaScriptコードを実行します。
例-
grunt.initConfig({
concat: {
myfile: {
options: {
banner: '/* <%= val %> */\n',
},
src: ['<%= myval %>', 'file3/*.js'],
dest: 'build/<%= file3 %>.js',
},
},
// properties used in task configuration templates
file1: 'c',
file2: 'b<%= file1 %>d',
file3: 'a<%= file2 %>e',
myval: ['file1/*.js', 'file2/*.js'],
});外部データのインポート
package.jsonファイルから外部データをインポートできます。grunt- contrib- uglifyプラグインは、ソースファイルを縮小するために使用でき、メタデータを使用してバナーコメントを作成します。JSONおよびYAMLデータのインポートには、grunt.file.readJSONおよびgrunt.file.readYAMLを使用できます。
例-
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
dist: {
src: 'src/<%= pkg.name %>.js',
dest: 'dist/<%= pkg.name %>.min.js'
}
}
});この章では、次のプラグインを使用して簡単なGruntファイルを作成しましょう-
- grunt-contrib-uglify
- grunt-contrib-concat
- grunt-contrib-jshint
- grunt-contrib-watch
上記のすべてのプラグインをインストールし、簡単な作成するには、以下の手順に従っGruntfile.jsを-
Step 1−Gruntの構成をカプセル化するラッパー関数を作成する必要があります。
module.exports = function(grunt) {};Step 2 −以下に示すように構成オブジェクトを初期化します−
grunt.initConfig({});Step 3−次に、プロジェクト設定をpackage.jsonファイルからpkgプロパティに読み込みます。これにより、package.jsonファイル内のプロパティ値を参照できます。
pkg: grunt.file.readJSON('package.json')Step 4−次に、タスクの構成を定義できます。最初のタスクconcatを作成して、src /フォルダーに存在するすべてのファイルを連結し、連結された.jsファイルをdist /フォルダーの下に保存しましょう。
concat: {
options: {
// define a string to insert between files in the concatenated output
separator: ';'
},
dist: {
// files needs to be concatenated
src: ['src/**/*.js'],
// location of the concatenated output JS file
dest: 'dist/<%= pkg.name %>.js'
}
}Step 5−ここで、JavaScriptを縮小するためにuglifyという別のタスクを作成しましょう。
uglify: {
options: {
// banner will be inserted at the top of the output which displays the date and time
banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
}上記のタスクは、縮小された.jsファイルを含むdist /フォルダー内にファイルを作成します。ザ・<%= concat.dist.dest %>concatタスクが生成するファイルを縮小するようにuglifyに指示します。
Step 6− jshintタスクを作成して、JSHintプラグインを構成しましょう。
jshint: {
// define the files to lint
files: ['Gruntfile.js', 'src/**/*.js'],
// configure JSHint
options: {
// more options here if you want to override JSHint defaults
globals: {
jQuery: true,
}
}
}上記のjshintタスクは、ファイルの配列を受け入れてから、オプションのオブジェクトを受け入れます。上記のタスクは、Gruntfile.jsファイルとsrc / **/*。jsファイルのコーディング違反を探します。
Step 7−次に、指定されたファイルの変更を検索し、指定されたタスクを実行する監視タスクがあります。
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}Step 8−次に、すべて_npmを介してインストールされたGruntプラグインをロードする必要があります。
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');Step 9−最後に、デフォルトのタスクを定義する必要があります。
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);デフォルトのタスクは、単に次のように入力して実行することができイサキコマンドラインでコマンドを。
これが完全なGruntfile.jsです-
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
jshint: {
// define the files to lint
files: ['Gruntfile.js', 'src/**/*.js'],
// configure JSHint
options: {
// more options here if you want to override JSHint defaults
globals: {
jQuery: true,
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};この章では、タスクの作成について学習しましょう。Gruntを実行するときはいつでも、実行する1つ以上のタスクが指定され、Gruntに実行したいことを通知します。デフォルトのタスクを指定すると、デフォルトで実行されます。
エイリアスタスク
タスクのリストが指定されている場合は常に、1つ以上の他のタスクを新しいタスクによってエイリアス化できます。エイリアスを実行すると、taskListで指定されたすべてのタスクが実行されます。タスクリストの下に示すように、引数は、タスクの配列でなければなりません-
grunt.registerTask(taskName, [description, ] taskList)たとえば、jshint、concat、およびuglifyタスクを使用してtaskListを定義し、デフォルトとしてtaskNameを指定すると、タスクを指定せずにGruntを実行すると、リストされているすべてのタスクが自動的に実行されます。
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);以下に示すようにタスク引数を指定することもできます-
grunt.registerTask('dist', ['concat:dist', 'uglify:dist']);上記のタスクでは、エイリアスdistはconcatタスクとuglifyタスクの両方を実行します。
マルチタスク
複数のタスクを実行するたびに、GruntはGrunt構成で同じ名前のプロパティを検索します。これらのタスクは複数の構成を持つことができ、任意の名前のターゲットを使用して定義されます。
タスクとターゲットの両方を指定すると、指定したターゲット構成のみが処理されます。
grunt concat:foo上記のコマンドは、ターゲットfooのみを実行します。
タスクのみを指定すると、すべてのターゲットが処理されます。
grunt concat上記のコマンドは、concatタスクのすべてのターゲットを反復処理します。
grunt.task.renameTaskを使用してタスクの名前を変更すると、新しいタスク名のプロパティがGruntによって構成オブジェクトで検索されます。
grunt.initConfig({
log: {
foo: [1, 2, 3],
bar: 'Welcome to tutorialspoint',
sap: true
}
});
grunt.registerMultiTask('log', 'Log stuff.', function() {
grunt.log.writeln(this.target + ': ' + this.data);
});上記の例では、Gruntがgrunt log：fooを介して実行された場合、マルチタスクはfoo：1,2,3をログに記録します。または、grunt log：barを介して実行された場合は、tutorialspointへようこそ。これは、ログに記録されます1,2,3：FOOを、その後バー：tutorialspointへようこそその後、樹液：本当のうなり声のように実行したときに作男ログ。
基本的なタスク
基本的なタスクを実行するときはいつでも、Gruntは構成または環境を検索しません。代わりに、指定されたタスク関数を実行し、関数の引数として指定されたコロンで区切られた引数を渡します。
grunt.registerTask(taskName, [description, ] taskFunction)次の例では、タスクはfooをログに記録し、grunt foo：testing：123コマンドを使用してGruntが実行されたかどうかを123でテストします。タスクがgruntfooのように引数なしで実行されるときはいつでも、タスクはfooをログに記録し、引数はログに記録しません。
grunt.registerTask('foo', 'A simple task to logs stuff.', function(arg1, arg2) {
if (arguments.length === 0) {
grunt.log.writeln(this.name + ", no args");
} else {
grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);
}
});カスタムタスク
マルチタスク構造に従わない場合は、以下に示すようにカスタムタスクを定義できます-
grunt.registerTask('default', 'My "default" task description.', function() {
grunt.log.writeln('Currently running the "default" task.');
});以下に示すように、別のタスク内でタスクを実行することができます。
grunt.registerTask('foo', 'My "foo" task.', function() {
// Enqueue bar and baz tasks, to run after foo completes, in-order.
grunt.task.run('bar', 'baz');
// Or:
grunt.task.run(['bar', 'baz']);
});以下に示すように非同期タスクを作成することもできます-
grunt.registerTask('asyncfoo', 'My "asyncfoo" task.', function() {
// Force task into async mode and grab a handle to the done() function.
var done = this.async();
// Run some sync stuff.
grunt.log.writeln('Processing your task..');
// Run some async stuff.
setTimeout(function() {
grunt.log.writeln('Finished!');
done();
}, 1000);
});以下に示すように、名前と引数にアクセスできるタスクを作成できます。
grunt.registerTask('foo', 'My task "foo" .', function(a, b) {
grunt.log.writeln(this.name, a, b);
});
// Usage:
// grunt foo
// logs: "foo", undefined, undefined
// grunt foo:bar
// logs: "foo", "bar", undefined
// grunt foo:bar:baz
// logs: "foo", "bar", "baz"以下に示すように、エラーがログに記録されるたびにタスクが失敗する可能性があるように、タスクを作成できます。
grunt.registerTask('foo', 'My task "foo" .', function() {
if (failureOfSomeKind) {
grunt.log.error('This is an error message.');
}
// If this task had errors then fail by returning false
if (ifErrors) { return false; }
grunt.log.writeln('This is success message');
});タスクが失敗するたびに、-forceが指定されていない限り、後続のすべてのタスクが終了します。
grunt.registerTask('foo', 'My task "foo" .', function() {
// Fail synchronously.
return false;
});
grunt.registerTask('bar', 'My task "bar" .', function() {
var done = this.async();
setTimeout(function() {
// Fail asynchronously.
done(false);
}, 1000);
});タスクは、正常に実行するために他のタスクに依存することができます。grunt.task.requiresは実際には他のタスクを実行せず、代わりに実行されて失敗していないかどうかを確認するだけであることに注意してください。
grunt.registerTask('foo', 'My task "foo" .', function() {
return false;
});
grunt.registerTask('bar', 'My task "bar" .', function() {
// Fail task if foo task failed or never ran.
grunt.task.requires('foo');
// This code executes if the foo task executed successfully.
grunt.log.writeln('Hello, World.. Welcome to Tutorialspoint!..');
});
// Usage:
// grunt foo bar doesn't log, because foo failed to execute.
// **Note: This is an example of space-separated sequential commands,
// (similar to executing two lines of code: `grunt foo` then `grunt bar`)
// grunt bar doesn't log, because foo never ran.必要な構成プロパティが見つからない場合は、タスクが失敗することもあります。
grunt.registerTask('foo', 'My task "foo" .', function() {
// Fail task if meta.name config properties is missing
// Format 1: String
grunt.config.requires('meta.name');
// or Format 2: Array
grunt.config.requires(['meta', 'name']);
// Log... conditionally.
grunt.log.writeln('This only log if meta.name is defined in the config.');
});タスクは、以下に示すように構成プロパティにアクセスできます-
grunt.registerTask('foo', 'My task "foo" .', function() {
// Log the value of the property. Returns null if the property is undefined.
grunt.log.writeln('The meta.name property is: ' + grunt.config('meta.name'));
// Also logs the value of the property. Returns null if the property is undefined.
grunt.log.writeln('The meta.name property is: ' + grunt.config(['meta', 'name']));
});