Grunt-タスクの構成
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'
}
}
});