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-installing

Grunt-インストール

Gruntのシステム要件

Gruntのインストール