Grunt-概要

Gruntとは何ですか？

Gruntは、JavaScriptオブジェクトのコマンドラインツールとして使用できるJavaScriptタスクランナーです。 NodeJSの上に書かれたタスクマネージャーです。

Gruntを使用する理由

Gruntは、コンパイル、単体テスト、ファイルの縮小、テストの実行など、繰り返しのタスクを非常に簡単に実行できます。
Gruntには、プラグインとスクリプトの機能を拡張する組み込みタスクが含まれています。
Gruntのエコシステムは巨大です。非常に少ない労力で自動化できます。

歴史

ソースコードの最初の行は、2011年にGruntJSに追加されました。 Grunt v0.4は2013年2月18日にリリースされました。 Grunt v0.4.5は2014年5月12日にリリースされました。 Gruntの安定バージョンは、2016年2月11日にリリースされた1.0.0 rc1です。

利点

Gruntを使用すると、ファイルの縮小、コンパイル、およびテストを簡単に実行できます。
Gruntは、Web開発者のワークフローを統合します。
インフラストラクチャが少ないため、Gruntを使用して新しいコードベースを簡単に操作できます。
開発ワークフローを高速化し、プロジェクトのパフォーマンスを向上させます。

デメリット

npm パッケージが更新されるたびに、Gruntの作成者が更新するまで待つ必要があります。
すべてのタスクは、指定された作業を行うように設計されています。指定したタスクを拡張する場合は、いくつかのトリックを使用して作業を完了する必要があります。
Gruntには、個々のプラグイン用の多数の構成パラメーターが含まれています。通常、Grunt構成ファイルの長さは長くなります。

Grunt-機能

GruntはJavaScriptベースのタスクランナーです。つまり、ワークフロー内の反復タスクを自動化でき、JavaScriptオブジェクトのコマンドラインツールとして使用できます。

GruntJSの最も顕著な機能のいくつかを以下にリストします-

Gruntは、セットアップファイルを記述するのと同じくらい簡単にワークフローを作成します。
最小限の労力で繰り返しタスクを自動化できます。
GruntはNodeJSに基づく人気のタスクランナーです。柔軟で広く採用されています。
JSのタスクとJSONの設定を含む簡単なアプローチがあります。
Gruntは、JavaScript、CSSファイル、テストファイル、CSSプリプロセッサファイル（SASS、LESS）などをコンパイルします。
Gruntには、プラグインとスクリプトの機能を拡張する組み込みタスクが含まれています。
開発ワークフローを高速化し、プロジェクトのパフォーマンスを向上させます。
インフラストラクチャが少ないため、Gruntを使用して新しいコードベースを簡単に操作できます。
Gruntのエコシステムは巨大です。非常に少ない労力で自動化できます。
Gruntは、反復タスクを実行中にエラーが発生する可能性を減らします。
Gruntには現在4000以上のプラグインがあります。
大規模な生産現場で使用できます。

Grunt-インストール

この章では、システムにGruntをインストールする方法の段階的な手順を提供します。

Gruntのシステム要件

オペレーティングシステム-クロスプラットフォーム
ブラウザのサポート-IE（Internet Explorer 8 +）、Firefox、Google Chrome、Safari、Opera

Gruntのインストール

ステップ1 *-Gruntを実行するにはNodeJが必要です。 NodeJsをダウンロードするには、https://nodejs.org/en/のリンクを開き、次のような画面が表示されます-

Grunt Installation

_最新の機能_バージョンのzipファイルをダウンロードします。

ステップ2 *-次に、セットアップを実行して、_NodeJs_をコンピューターにインストールします。

ステップ3 *-次に、_environment variables_を設定する必要があります。

パスユーザー変数

[マイコンピュータ]を右クリックします。
Properties を選択します。
次に、*詳細*タブを選択し、*環境変数*をクリックします。

Grunt Installation

[Environment Variables]ウィンドウで、画面に示すように[PATH]をダブルクリックします。

Grunt Installation

図のように、[ユーザー変数の編集]ウィンドウが表示されます。 _Variable Value_フィールドにNodeJsフォルダーパスを_C：\ Program Files \ nodejs \ node_modules \ npm_として追加します。パスが既に他のファイルに設定されている場合は、その後にセミコロン（;）を追加し、以下に示すようにNodeJsパスを追加する必要があります-

Grunt Installation

最後に、[OK]ボタンをクリックします。

システム変数

[システム変数]の下で、次の画面に示すように[_パス]をダブルクリックします。

Grunt Installation

図に示すように、[システム変数の編集]ウィンドウが表示されます。 _Variable Value_フィールドにNodeJsフォルダーパスを_C：\ Program Files \ nodejs \ _として追加し、以下に示すように_OK_をクリックします-

Grunt Installation

ステップ4 *-システムにgruntをインストールするには、以下に示すようにGruntのコマンドラインインターフェイス（CLI）をグローバルにインストールする必要があります-

npm install -g grunt-cli

上記のコマンドを実行すると、システムパスに_grunt_コマンドが追加され、任意のディレクトリから実行できるようになります。

_grunt-cli_をインストールしても、Gruntタスクランナーはインストールされません。 _grunt-cli_の役割は、_Gruntfile_の隣にインストールされているバージョンのGruntを実行することです。マシンは複数のバージョンのGruntを同時にインストールできます。

ステップ5 *-次に、Gruntを実行するために*設定ファイル*を作成します。

*package.json*

_package.json_ファイルは、_Gruntfile_の横のプロジェクトのルートディレクトリに配置されます。 _package.json_は、package.jsonと同じフォルダーでコマンド npm install を実行するたびに、リストされた各依存関係を正しく実行するために使用されます。

T基本的な_package.json_は、コマンドプロンプトで次のコマンドを入力することで作成できます-

npm init

基本的な_package.json_ファイルは次のようになります-

{
   "name": "finddevguides",
   "version": "0.1.0",
   "devDependencies": {
      "grunt-contrib-jshint": "~0.10.0",
      "grunt-contrib-nodeunit": "~0.4.1",
      "grunt-contrib-uglify": "~0.5.0"
   }
}

次のコマンドを使用して、既存の_pacakge.json_ファイルにGruntおよびgruntpluginsを追加できます-

npm install <module> --save-dev

上記のコマンドで、<module>はローカルにインストールされるモジュールを表します。上記のコマンドは、<モジュール>を_devDependencies_に自動的に追加します。

たとえば、次のコマンドは、_Grunt_の最新バージョンをインストールし、_devDependencies_に追加します-

npm install grunt --save-dev

*Gruntfile.js*

_Gruntfile.js_ファイルは、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
      uglify: {
        //uglify task configuration
         options: {},
         build: {}
      }
   });

  //log something
   grunt.log.write('Hello world! Welcome to finddevguides!!\n');

  //Load the plugin that provides the "uglify" task.
   grunt.loadNpmTasks('grunt-contrib-uglify');

  //Default task(s).
   grunt.registerTask('default', ['uglify']);
};

Grunt-はじめに

Gruntを使用するには、Node.jsをインストールする必要があります。 Node.jsのインストールについては、前のリンク：/grunt/grunt_installing [chapter]で説明されています。 Node.jsパッケージマネージャーを使用して、GruntおよびGruntプラグインをインストールできます。

システムでGruntを設定する前に、次のコマンドを使用してノードパッケージマネージャーを更新できます-

npm update -g npm

MacまたはLinuxを使用している場合は、以下に示すように、コマンドラインの先頭で_sudo_ワードを使用して管理者アクセスを許可する必要があります-

sudo npm update -g npm

CLIインストール

CLIは、インストールされているGruntのバージョンを実行するコマンドラインインターフェイスの略です。 Gruntを開始するには、以下に示すように、Gruntのコマンドラインインターフェイス（CLI）をグローバルにインストールする必要があります-

npm install -g grunt-cli

上記のコマンドを実行すると、gruntコマンドがシステムパスに配置され、任意のディレクトリから実行できるようになります。 _grunt-cli_をインストールしてGruntタスクランナーをインストールすることはできません。マシンは複数のバージョンのGruntを同時にインストールできます。

CLIの動作

CLIは、Gruntが実行されるたびに_require（）_ systemを使用して、システムにインストールされているGruntを探します。 _grunt-cli_を使用すると、プロジェクト内の任意のディレクトリからGruntを実行できます。ローカルにインストールされたGruntを使用している場合、grunt-cliはローカルにインストールされたGruntライブラリを使用し、Gruntファイルから構成を適用します。

既存および新規プロジェクトでの作業

あなたが_package.json_と_Gruntfile_を含む既に設定されたプロジェクトで作業している場合、以下に指定されているように簡単な手順に従ってください-

プロジェクトのルートディレクトリへのパスを見つけます。
_npm install_コマンドを使用して依存関係をインストールできます。
_grunt_コマンドを使用してGruntを実行します。

新しいプロジェクトを作成する場合は、2つのファイル_package.json_および_Gruntfile_をプロジェクトに含めます。

package.json -package.jsonファイルはプロジェクトのルートディレクトリに配置され、同じフォルダーでコマンド_npm install_を実行するたびに、リストされた各依存関係を実行するために使用されます。
Gruntfile.js -Gruntfile.jsファイルは、プロジェクトの構成設定を書き込むために使用されます。

package.json

_package.json_ファイルは、プロジェクトのルートディレクトリの_Gruntfile_の横に配置され、同じフォルダーで_npm install_コマンドを実行するたびに、リストされた各依存関係を実行するために使用されます。

以下にリストされているように、さまざまな方法でpackage.jsoninを作成できます-

_grunt-init_を実行してpackage.jsonファイルを作成できます。
_npm-init_コマンドを使用してpackage.jsonファイルを作成することもできます。

以下に示すように仕様を書くことができます-

{
   "name": "finddevguides",
   "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-dev

Gruntfile

_Gruntfile.js_ファイルは、Gruntの構成設定のデフォルトの場所です。 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は_default_タスクを探します。上記のコードでは、gruntcommandを使用して実行できる_uglify_というタスクを使用しています。これは、_grunt uglify_コマンドを明示的に実行するのと同じであり、配列内のタスクの数を指定できます。

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

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'
      }
   }
});

Grunt-サンプルファイル

この章では、次のプラグインを使用して簡単なGruntファイルを作成しましょう-

grunt-contrib-uglify
うなり声-連結-連結
うなり声-contrib-jshint
うめき声

上記のすべてのプラグインをインストールし、以下の手順に従って単純な_Gruntfile.js_を作成します-

ステップ1 *-Gruntの設定をカプセル化する_wrapper_関数を作成する必要があります。

module.exports = function(grunt) {};

ステップ2 *-以下に示すように構成オブジェクトを初期化します-

grunt.initConfig({});

ステップ3 *-次に、_package.json_ファイルのプロジェクト設定を_pkg_プロパティに読み込みます。これにより、yourpackage.jsonファイル内のプロパティ値を参照できます。

pkg: grunt.file.readJSON('package.json')

ステップ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/.js'
   }
}

ステップ5 *-次に、_uglify_という別のタスクを作成して、JavaScriptを縮小します。

uglify: {
   options: {
     //banner will be inserted at the top of the output which displays the date and time
      banner: '/*!   */\n'
   },
   dist: {
      files: {
         'dist/.min.js': ['']
      }
   }
}

上記のタスクは、縮小された.jsファイルを含む_dist_/フォルダー内にファイルを作成します。 **は、concatタスクが生成するファイルを縮小するよう_uglify_に指示します。

ステップ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_ファイル内のコーディング違反を探します。

ステップ7 *-次に、指定されたファイルの変更を探し、指定したタスクを実行する_watch_タスクがあります。

watch: {
   files: [''],
   tasks: ['jshint']
}

ステップ8 *-次に、__ npm_を介してすべてインストールされたGruntプラグインをロードする必要があります。

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.loadNpmTasks('grunt-contrib-concat');

ステップ9 *-最後に、_default_タスクを定義する必要があります。

grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

_default_タスクは、コマンドラインで_grunt_コマンドを入力するだけで実行できます。

完全な_Gruntfile.js_を次に示します-

module.exports = function(grunt) {

   grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      concat: {
         options: {
            separator: ';'
         },
         dist: {
            src: ['src/**/*.js'],
            dest: 'dist/.js'
         }
      },
      uglify: {
         options: {
            banner: '/*!   */\n'
         },
         dist: {
            files: {
               'dist/.min.js': ['']
            }
         }
      },
      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: [''],
         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-タスクの作成

この章では、_タスクの作成_について学びましょう。 Gruntを実行するたびに、Gruntに実行したいことを通知する1つ以上のタスクを実行するように指定します。 _default task_を指定すると、デフォルトで実行されます。

エイリアスタスク

タスクのリストを指定するたびに、1つ以上の他のタスクに新しいタスクのエイリアスを作成できます。エイリアスを実行すると、_taskList_で指定されたすべてのタスクが順番に実行されます。 _taskList_引数は、以下に示すようにタスクの配列でなければなりません-

grunt.registerTask(taskName, [description, ] taskList)

たとえば、jshint _、 concat、_、および_uglify_タスクで_taskList_を定義し、_taskName_を_default_として指定すると、_Grunt_がタスクを指定せずに実行された場合、リストされたすべてのタスクが自動的に実行されます。

grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

また、以下に示すようにタスクの引数を指定することができます-

grunt.registerTask('dist', ['concat:dist', 'uglify:dist']);

上記のタスクでは、エイリアス_dist_は_concat_と_uglify_の両方のタスクを実行します。

マルチタスク

複数のタスクを実行するたびに、GruntはGrunt設定で同じ名前のプロパティを検索します。これらのタスクには、_targets_という任意の名前を使用して定義される複数の構成を含めることができます。

タスクとターゲットの両方を指定すると、指定されたターゲット構成のみが処理されます。

grunt concat:foo

上記のコマンドは、ターゲット_foo_のみを実行します。

タスクのみを指定すると、すべてのターゲットが処理されます。

grunt concat

上記のコマンドは、_concat_タスクのすべてのターゲットを反復処理します。

_grunt.task.renameTask_を使用してタスクの名前を変更すると、_new_タスク名のプロパティがGruntによって設定オブジェクトで検索されます。

grunt.initConfig({
   log: {
      foo: [1, 2, 3],
      bar: 'Welcome to finddevguides',
      sap: true
   }
});

grunt.registerMultiTask('log', 'Log stuff.', function() {
   grunt.log.writeln(this.target + ': ' + this.data);
});

上記の例では、Gruntが_grunt log：foo_を介して実行された場合、マルチタスクは_foo：1,2,3_をログに記録します。 Gruntが_grunt log_として実行されている場合、foo：1,2,3、次に_bar：finddevguides_、次に_sap：true_のログが記録されます。

基本的なタスク

基本タスクを実行するたびに、Gruntは構成または環境を検索しません。代わりに、指定されたタスク関数を実行し、で指定されたコロン区切りの引数を関数の引数として渡します。

grunt.registerTask(taskName, [description, ] taskFunction)

次の例では、タスクは_fooをログに記録し、Gruntが_grunt foo：testing：123_コマンドで実行された場合に123_をテストします。 _grunt foo_のような引数なしでタスクが実行されるたびに、タスクはargsなしでfooを_logします。

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);
   }
});

カスタムタスク

_multi task_構造に従わない場合は、以下に示すようにカスタムタスクを定義できます-

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 finddevguides!..');
});

//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']));
});

Grunt-quick-guide

Grunt-概要

Gruntとは何ですか？

Gruntを使用する理由

歴史

利点

デメリット

Grunt-機能

Grunt-インストール

Gruntのシステム要件

Gruntのインストール

Grunt-はじめに

CLIインストール

CLIの動作

既存および新規プロジェクトでの作業

package.json

Gruntfile

ラッパー関数

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

Gruntプラグインとタスクの読み込み

カスタムタスク

Grunt-タスクの構成

グラント構成

タスク構成とターゲット

オプション

ファイル

コンパクトフォーマット

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

ファイル配列形式

古いフォーマット

カスタムフィルター機能

グロビングパターン

ファイルオブジェクトを動的に構築する

名前変更プロパティ

テンプレート

外部データのインポート

Grunt-サンプルファイル

Grunt-タスクの作成

エイリアスタスク

マルチタスク

基本的なタスク

カスタムタスク