Gruntで開発環境を構築してみる | 電脳備忘録

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

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

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

grunt-cliのインストール

nodeのコマンドプロンプトではなくてwindowsのコマンドプロンプトを起動。
下記コマンドを実行してgrunt-cliをインストール
```
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をコンパイルしてみる

'use strict';
module.exports = function(grunt) {
var pkg, taskName;
pkg = grunt.file.readJSON('package.json');
grunt.initConfig({
// SassとCompassをコンパイルします。
compass: {
dist: {
options: {
config: 'config.rb'
}
}
},
watch: {
// Sassファイルが更新時にタスクを実行。
sass: {
files: ['sass/*.scss'],
tasks: ['compass', 'cmq', 'csscomb'],
options: {
//変更されたらブラウザを更新
livereload: true,
nospawn: true
}
}
},
// メディアクエリをまとめる。
cmq:{
options: {
log: false
},
dev: {
files: {
'css/': ['css/style.css']
}
}
},
// CSSプロパティを揃える。
csscomb:{
dev:{
expand: true,
cwd: 'css/',
src: ['*.css'],
dest: 'css/'
}
}
});
// GruntFile.jsに記載されているパッケージを自動読み込み
for(taskName in pkg.devDependencies) {
if(taskName.substring(0, 6) == 'grunt-') {
grunt.loadNpmTasks(taskName);
}
}
grunt.registerTask('default', ['watch:sass']);
grunt.registerTask('eatwarnings', function() {
grunt.warn = grunt.fail.warn = function(warning) {
grunt.log.error(warning);
};
});
};

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