今回はGrunt.jsのインストールを解説してみたいと思います。
Grunt.jsについての概要が知りたければ、前回の投稿の
を見てみて下さい。
Grunt.jsインストールまでの手順
Grunt.jsなのですが、インストールまでの手順がちょっと複雑だったりします。
Gruntのver3.0までは、gruntをインストールするだけで、sassのコンパイルが出来たのですが、ver4.0からは変更され、タスクを動かすもの＋各種プラグインという形式になりました。
- grunt-cliのインストール(grunt command line interface)
- package.json作成
- プラグインのインストール
- gruntfile.jsの作成（タスク）
結構手順多いんですよね。。
1つ1つ見て行きましょう。
Grunt.jsのインストールに必要な環境
インストールの前に必要な環境は下記の様なものが必要になります。
- Node.js
- npm
- sassやcoffeeScriptの環境
ココらへんはGruntと関係が無いので、割愛します。
それほどインストールは難しくないと思うので調べてみ下さい。
grunt-cliのインストール
では早速インストールしていきましょう
[c] npm install -g grunt-cli[/c]
これで、grunt-cliというものがインストールされます。
それでは、そのディレクトリで、以下のコマンドを使ってみて下さい。
[/c]
そうすると下記のようなメッセージが出ます。
[c] grunt-cli: The grunt command line interface. (v0.1.6)Fatal error: Unable to find local grunt.
If you’re seeing this message, either a Gruntfile wasn’t found or grunt
hasn’t been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
http://gruntjs.com/getting-started
[/c]
これはどういうことかというと、grunt-cliとはそのディレクトリにあるGruntを実行するだけの小さなgrunt実行コマンドだけしかありません。
なので、grunt本体が無いよと言われてしまいます。
それではgurnt本体をインストールしようと思います。
package.jsonの作成
grunt本体もプラグインになっていて、どういったプラグインをインストールするかを制御するのがpackage.jsonです。
基本的な書き方はこんな感じです。
[c]</pre>{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
}
}
<pre>[/c]
プロジェクト名を書き、そのプロジェクトのバージョンを書きます。
devDependenciesという項目に入れたいプラグインを記述します。
今回はとりあえずgruntをインストールしたいので、「 “grunt”: “~0.4.1”,」としてます。
gruntをインストールしてみましょう。
[c] npm install[/c]
こうするとディレクトリに「node_modules」というディレクトリが出来、その中にgruntというファイルが出来上がると思います。
これで、gruntのインストールが完了しました。
ただ、これだけでは、何もタスクを書いていないので、何も実行することができません。
次回、grunt.fileを記述してsassなどの基本的なタスクを動作させていこうと思います。
ではでは
