grunt-mustache-renderを使い、テンプレートファイルとデータファイルから、複数のHTMLファイルを量産します。
grunt-mustache-renderの設定
grunt-mustache-renderの設定はこんな感じです。
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のデータを記載しています。
data.js
module.exports = {
dogs: {
title: "犬の種類",
list:[
{ label:"パピヨン", description:"とても頭がいいです" },
{ label:"ポメラニアン", description:"活発なチビちゃん" },
{ label:"パグ", description:"愛嬌たっぷりの憎めない子" },
{ label:"秋田犬", description:"日本の天然記念物です" }
]
},
cats: {
title: "猫の種類",
list:[
{ label:"アメリカンショートヘア", description:"運動神経抜群" },
{ label:"シャム", description:"タイに祖先をもっています" },
{ label:"ロシアンブルー", description:"ブルーの毛色" }
]
}
}
テンプレートファイルの設定
量産ファイルの雛形です。ここにデータが注入されます。
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テンプレートエンジンの記述方法は、こちらやこちらにありますが、基本的には{{と}}の間にデータのプロパティ名を記述すると、そこにデータを代入してくれます。また、{{#hoge}}..{{../hoge}}のように記述すると、配列をその要素数分繰り返してくれます。
タスクの実行
mustache_renderタスクを実行します。
grunt mustache_render
生成されるHTMLその1
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
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 でタスクを実行します。