Gruntで開発環境を構築してみる

Gruntというタスクの自動化ツールが便利そうだったので設定してみたのですが、これがまぁなかなか手間取ったのでメモに残しておきます...。
Gruntを動かすにはNode.jsとgrunt-cliというCIが必要とのことなのでこれらをインストール。

Node.jsのインストールと設定

  1. Node.jsのサイトからwindows向けのインストーラーをダウンロード
  2. ダウンロードしたファイル「node-v0.10.25-x64.msi」(2014/01/24現在)をダブルクリックしてnode.jsをインストール
  3. 「コントロールパネル」-「システムとセキュリティ」-「システム」-「システムの詳細設定」とクリック
  4. 「システムのプロパティ」で[環境変数]をクリック
  5. 「環境変数」でシステム環境変数[新規]をクリックして下記を入力して[OK]をクリック
  6. 変数名 NODE_HOME
    変数値 C:Program Filesnodejs
  7. 私の環境だと後々rubyがインストールされてないからcompassが動かないとエラーメッセージが出たので、変数値にRubyのパスを追加
    C:Program Filesnodejs;C:Ruby193bin
  8. 変数「Path」が無かったので新規追加
    変数名 Path
    変数値 %NODE_HOME%

grunt-cliのインストール

  1. nodeのコマンドプロンプトではなくてwindowsのコマンドプロンプトを起動。
  2. 下記コマンドを実行してgrunt-cliをインストール
  3. npm install -g grunt-cli

下記の場所にいろいろインストールされたようです。
C:\Users\ユーザー名\AppData\Roaming\npm\node_modules\grunt

各種設定ファイルの作成と実行

作業するディレクトリに移動して下記コマンドを入力

npm init

色々聞かれるのでそれに答えると最終的にpackage.jsonファイルが生成される。このファイルが生成されたら下記のコマンドを打つ

npm install grunt --save-dev

--save-devをつけると、package.jsonにインストールした情報が記述が追加されます。
なお npm install grunt は、gruntをインストールしろ、という指示です。node_modulesというフォルダが生成され、その中にgruntがインストールされます。

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門|Web Design KOJIKA17

必要なモジュールをインストールする

npm install grunt-contrib-compass grunt-contrib-connect grunt-csscomb grunt-contrib-livereload grunt-combine-media-queries grunt-contrib-watch  --save-dev

Grunt.jsファイルを作成する。内容については下記のサイトを参考にさせていただきました。

Gruntを使ってSass(SCSS) / Compassをコンパイルしてみる

config.rb(compass)の設定ファイルはこんな感じ

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded

下記コマンドでgruntを実行

grunt

これで、コンパイル時にcssのプロパティを並び替えてくれるようになりました。 圧縮してコンパイルするときは、並び順とか考えなくていいから今まで通りcompassでコンパイルしてあげればよさそうですね。
使い分けながらしばらくは様子を見ようと思います。

2014.02.06追記

後日grunt実行したら下記のエラーを吐いて実行できなくなりました。

Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.

結局再度インストールすることで実行できましたが、原因がよくわかりません...。

npm install grunt-contrib-watch --save-dev
投稿日