自分用の覚書。環境はMacです。
node.jsのインストール
http://nodejs.org/
公式サイトからnode.jsのインストーラをダウンロードしてインストール。
Gruntのインストール
の前に
npm -v
を実行して、npmが使用できるようになっていることを確認。
コマンドを実行してバージョンが表示されたら、以下のコマンドをスーパーユーザーで実行
sudo npm install -g grunt-cli
package.jsonの準備
packeage.jsonをgruntを使用するフォルダ直下に作成する。
ファイルの内容は以下。著作者情報やバージョン情報も設定できるけども、割愛します。
{
"name": "practis"
}
作成したら、bashでgruntを使用するフォルダ（以下、当該フォルダ）に移動して以下のコマンドを実行。
当該フォルダにgruntをインストール（install grunt)し、package.jsonに以下のインストール内応を記載(--save-dev)する
sudo npm install grunt --save-dev
当該フォルダ以下にnode_modulesフォルダが作成され、package.jsonにはdevDependenciesが追記され、以下の様な状態になる
{
"name": "practis",
"devDependencies": {
"grunt": "~0.4.1"
}
}
続いて、使用するプラグインをインストール。
ファイル変更を監視するためのwatch
sudo npm install grunt-contrib-watch --save-dev
テスティングツールのjasmine
sudo npm install grunt-contrib-jasmine --save-dev
package.jsonは以下のようになっているはず
{
"name": "practis",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-watch": "~0.4.0",
"grunt-contrib-jasmine": "~0.4.2"
}
}
ここまで入ったら、開発する環境を用意。
フォルダ直下にGruntfile.jsを作成。
内容と意味合いについては以下
module.exports = function(grunt) {
grunt.initConfig({
watch: {
// src/jsフォルダ以下のjs拡張子ファイルを対象に監視
files: ['src/js/*.js'],
// 変更があったらタスクjasmineを実行
tasks: ['jasmine']
},
jasmine: {
// プロパティ名はテストケース名
sample: {
// このテストケースでテストするファイルの指定
src: 'src/js/sample.js',
options: {
// テストケース
specs: 'spec/*Spec.js',
// ヘルパー
helpers: 'spec/*Helper.js'
}
}
}
});
// gruntでjasmineを使う
grunt.loadNpmTasks('grunt-contrib-jasmine');
// 変更したファイルを監視するためのwatch
grunt.loadNpmTasks('grunt-contrib-watch');
};
フォルダ内の構成を以下のようにする
Gruntfile.js
package.json
node_modules(自動作成されたフォルダ)
spec(任意作成したフォルダ・テストケースのjsを入れる)
src(任意作成したフォルダ・開発物を入れる)
└js(jsを入れる)
テストケースをspecフォルダ以下に作成
Gruntfile.jsに定義した名前に沿うようにファイル名をつける
describe("test case name", function() {
var foo;
beforeEach(function() {
foo = sample.test('hallo');
});
it("should say", function (){
var say = foo.say('hallo');
expect(say).toEqual("say hallo");
});
});
テストされる対象のjsをsrc/js以下に作成
Gruntfile.jsで指定したテストケースでテストされる対象として作成。
var sample = {};
sample.test = function(param){
return {say : function(){return 'say ' + param}}
}
ここまで準備ができたら、jsファイルの変更の監視を開始する
grunt watch
これで、src/js以下のsample.jsファイルが変更された時点でjasmineのテストが走る
Completed in 2.249s at Sat May 04 2013 16:33:33 GMT+0900 (JST) - Waiting...OK
>> File "src/js/sample.js" changed.
Running "jasmine:test" (jasmine) task
Testing jasmine specs via phantom
.
1 spec in 0.002s.
>> 0 failures
Done, without errors.
上記はテストが成功した場合。
取り敢えず、これで動作することを確認。
jasmineの使い方については、追い追い調べようと思います。
補足・動作させるのにphantomjsを使用していますが
プラグイン内に含まれているのでインストールは不要かも知れません。
もともとphamtomjsがインストールされた環境で実行したので確かめてませんが、もし動作しなければphantomjsをインストールしてパスを通せばうまくいくとおもいます。