Grunt-インストール

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

Gruntのシステム要件

Operating System −クロスプラットフォーム
Browser Support − IE（Internet Explorer 8以降）、Firefox、Google Chrome、Safari、Opera

Gruntのインストール

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

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

Step 2−次に、セットアップを実行して、コンピューターにNodeJをインストールします。

Step 3−次に、環境変数を設定する必要があります。

Path User Variable

右クリック My Computer。
選択する Properties。
次に、 Advanced タブをクリックしてクリックします Environment Variables。

下の環境変数ウィンドウ、ダブルクリックPATH画面のように。

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

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

System Variable

下では、システム変数、をダブルクリックパスは、次の画面のように。

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

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

npm install -g grunt-cli

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

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

Step 5 −さて、作成します configuration files Gruntを実行するために。

package.json

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

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

npm init

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

{
   "name": "tutorialspoint",
   "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>はローカルにインストールされるモジュールを表します。上記のコマンドは、<module>をdevDependenciesに 自動的に追加します。

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

npm install grunt --save-dev

Gruntfile.js

Gruntfile.jsのファイルは、うなり声のための私達の構成を定義するために使用されます。設定が書き込まれる場所です。基本的な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 Tutorialspoint!!\n');

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

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