grunt-mustache-renderでhtmlを量産する

[grunt-mustache-render](https://github.com/5thWall/mustache-render)を使い、テンプレートファイルとデータファイルから、複数のHTMLファイルを量産します。
## grunt-mustache-renderの設定
grunt-mustache-renderの設定はこんな感じです。

```js:Gruntfile.js
grunt.initConfig({
    ...
    
	mustache_render: {
        mass: {
            files: (function() {
                // データを読み込む
                var allData = require('./data.js');
				var files = [];
                for (var pageName in allData) {
                    var pageData = allData[pageName];
                    
					// files配列にオブジェクトを追加
                    files.push({
						// ページデータ
                        data: pageData,
						// テンプレートファイル（共通）
                        template: './template.html',
						// 生成するhtmlファイル
                        dest: './output/' + pageName + '.html'
                    });
                }
					
				// 配列を返却
                return files;
            }())
        }
    }

});
```
今回は単一のテンプレート(template.html)とデータファイル(data.js)から、複数のHTMLを生成したかったため、即時関数にてタスクの設定をしています。


## データファイルの設定
テンプレートに流し込むデータファイルです。dogs.htmlとcats.htmlのデータを記載しています。

```js:data.js
module.exports = {

	dogs: {
		title: "犬の種類",
		list:[
			{ label:"パピヨン", description:"とても頭がいいです" },
			{ label:"ポメラニアン", description:"活発なチビちゃん" },
			{ label:"パグ", description:"愛嬌たっぷりの憎めない子" },
			{ label:"秋田犬", description:"日本の天然記念物です" }
		]
	},
	cats: {
		title: "猫の種類",
		list:[
			{ label:"アメリカンショートヘア", description:"運動神経抜群" },
			{ label:"シャム", description:"タイに祖先をもっています" },
			{ label:"ロシアンブルー", description:"ブルーの毛色" }
		]
	}

}
```

## テンプレートファイルの設定
量産ファイルの雛形です。ここにデータが注入されます。

```html:template.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>{{title}}</title>
    </head>
    <body>
        <h1>{{title}}</h1>
        <dl>
            {{#list}}
            <dt>{{label}}</dt>
            <dd>{{description}}</dd>
            {{/list}}
        </dl>
    </body>
</html>
```

[mustache](http://mustache.github.io)テンプレートエンジンの記述方法は、[こちら](http://mustache.github.io/mustache.1.html)や[こちら](mustache.github.io/mustache.5.ron.html)にありますが、基本的には`{{`と`}}`の間にデータのプロパティ名を記述すると、そこにデータを代入してくれます。また、`{{#hoge}}..{{../hoge}}`のように記述すると、配列をその要素数分繰り返してくれます。





## タスクの実行

mustache_renderタスクを実行します。

```
grunt mustache_render
```

生成されるHTMLその1

```html:outpupt/dogs.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>犬の種類</title>
    </head>
    <body>
        <h1>犬の種類</h1>
        <dl>
            <dt>パピヨン</dt>
            <dd>とても頭がいいです</dd>
            <dt>ポメラニアン</dt>
            <dd>活発なチビちゃん</dd>
            <dt>パグ</dt>
            <dd>愛嬌たっぷりの憎めない子</dd>
            <dt>秋田犬</dt>
            <dd>日本の天然記念物です</dd>
        </dl>
    </body>
</html>

```


生成されるHTMLその2

```html:outpupt/cats.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>猫の種類</title>
    </head>
    <body>
        <h1>猫の種類</h1>
        <dl>
            <dt>アメリカンショートヘア</dt>
            <dd>運動神経抜群</dd>
            <dt>シャム</dt>
            <dd>タイに祖先をもっています</dd>
            <dt>ロシアンブルー</dt>
            <dd>ブルーの毛色</dd>
        </dl>
    </body>
</html>
```

jade等の別のテンプレートエンジンを使っても、同じような事ができるのかもしれませんが、今回のサンプルのように、テキストの流し込みなどの単純な量産作業をするには、mustacheを使うのもなかなか便利ではないかと思います。


##サンプルファイル
https://github.com/megurock/grunt-mustache-render-example
```npm install``` でモジュールをインストールした後、 ```grunt mustache_render``` でタスクを実行します。