Grunt.jsの始め方 -インストール編-

今回はGrunt.jsのインストールを解説してみたいと思います。

Grunt.jsについての概要が知りたければ、前回の投稿の

Grunt.jsの始め方 -Grunt.jsの概要編-

を見てみて下さい。

Grunt.jsインストールまでの手順

Grunt.jsなのですが、インストールまでの手順がちょっと複雑だったりします。

Gruntのver3.0までは、gruntをインストールするだけで、sassのコンパイルが出来たのですが、ver4.0からは変更され、タスクを動かすもの+各種プラグインという形式になりました。

  1. grunt-cliのインストール(grunt command line interface)
  2. package.json作成
  3. プラグインのインストール
  4. gruntfile.jsの作成(タスク)

結構手順多いんですよね。。
1つ1つ見て行きましょう。

Grunt.jsのインストールに必要な環境

インストールの前に必要な環境は下記の様なものが必要になります。

  • Node.js
  • npm
  • sassやcoffeeScriptの環境

ココらへんはGruntと関係が無いので、割愛します。

それほどインストールは難しくないと思うので調べてみ下さい。

grunt-cliのインストール

では早速インストールしていきましょう

npm install -g grunt-cli

これで、grunt-cliというものがインストールされます。
それでは、そのディレクトリで、以下のコマンドを使ってみて下さい。

grunt

そうすると下記のようなメッセージが出ます。

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

これはどういうことかというと、grunt-cliとはそのディレクトリにあるGruntを実行するだけの小さなgrunt実行コマンドだけしかありません。
なので、grunt本体が無いよと言われてしまいます。
それではgurnt本体をインストールしようと思います。

package.jsonの作成

grunt本体もプラグインになっていて、どういったプラグインをインストールするかを制御するのがpackage.jsonです。

基本的な書き方はこんな感じです。

</pre>
{
 "name": "my-project-name",
 "version": "0.1.0",
 "devDependencies": {
"grunt": "~0.4.1",
}
}
<pre>

プロジェクト名を書き、そのプロジェクトのバージョンを書きます。
devDependenciesという項目に入れたいプラグインを記述します。
今回はとりあえずgruntをインストールしたいので、「 “grunt”: “~0.4.1”,」としてます。

gruntをインストールしてみましょう。

npm install

こうするとディレクトリに「node_modules」というディレクトリが出来、その中にgruntというファイルが出来上がると思います。
これで、gruntのインストールが完了しました。

grunt4
ただ、これだけでは、何もタスクを書いていないので、何も実行することができません。

次回、grunt.fileを記述してsassなどの基本的なタスクを動作させていこうと思います。

ではでは

お問い合わせ

お仕事の依頼や何か質問などあれば、こちらからお願いします〜。

Not readable? Change text.

Start typing and press Enter to search