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-getting-started

目次