Grunt-configuring-tasks

提供:Dev Guides
移動先:案内検索

Grunt-タスクの構成

_Gruntfile.js file_でGruntのプロジェクト固有の構成データを定義できます。

グラント構成

タスク構成データは、_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に設定されている場合、一致しないパターンを定義します。
  • ドット-ピリオドまたはそれ以外で始まるファイル名と一致します。
  • 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',
      },
   },
});

ファイルオブジェクト形式

プロパティ名が_dest_ fileで、その値が_src_ fileであるターゲットごとのsrc-destファイルマッピングを指定します。

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-target_ファイル形式は、宛先ファイルのパスがターゲットの名前であるマルチタスクが存在する前にありました。 次の形式は非推奨であり、コードでは使用されません。

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は、_built-in node-glob_および_minimatch libraries_を使用して、グロビングをサポートしています。 グロビングパターンには、次の点が含まれています-

 *_* _は任意の数の文字と一致しますが、_/_とは一致しません。
* _?_は単一の文字に一致しますが、_/_には一致しません。
 *_* * _は、_/_を含む多くの文字に一致します。
* _ \ {} _は、「または」式のコンマ区切りリストを指定します。
* _!_は、最初のパターンマッチを無効にします。

例-

{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_は、拡張子を示すピリオドの場所を示します。 _first_期間または_last_期間のいずれかを使用します。デフォルトでは、_first_期間に設定されます
  • _flatten_は、_dest_パスからすべてのパス部分を削除します。
  • _rename_は、新しい宛先とファイル名を含む文字列を指定します。

名前変更プロパティ

これは文字列を返す独自のJavaScript関数であり、文字列値を名前の変更に使用することはできません。 次の例では、_copy_タスクは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種類が含まれています-

  • **プロパティは、構成内のofprop.subpropの値を展開するために使用され、文字列値、配列、その他のオブジェクトを参照できます。
  • __ プロパティは、制御フローまたはループに使用されるインラインJavaScriptコードを実行します。

例-

grunt.initConfig({
   concat: {
      myfile: {
         options: {
            banner: '/**/\n',
         },
         src: ['', 'file3/*.js'],
         dest: 'build/.js',
      },
   },
  //properties used in task configuration templates
   file1: 'c',
   file2: 'bd',
   file3: 'ae',
   myval: ['file1/*.js', 'file2/*.js'],
});

外部データのインポート

_package.json file_から外部データをインポートできます。 grunt-contrib-_uglify_プラグインを使用してソースファイルを縮小し、メタデータを使用してバナーコメントを作成できます。 JSONおよびYAMLデータのインポートには、_grunt.file.readJSON_および_grunt.file.readYAML_を使用できます。

例-

grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),
   uglify: {
      options: {
         banner: '/*!   */\n'
      },
      dist: {
         src: 'src/.js',
         dest: 'dist/.min.js'
      }
   }
});