jade とか ejs とかもいいんだけど、もっとシンプルにやりたいなっと思って。
json落としましたよ
HTMLテンプレート
プレースホルダー（:TAG）を設けて、こういうHTML作っておく。
template.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>:NAME</title>
</head>
<body>
<p id=":ID">:TEXT</p>
</body>
</html>
データとなる JSONを用意する
プレースホルダーの文字列をキーにしたオブジェクトをつくる。
このJSONの値が挿入されるという仕組み。
スプレッドシートとかから出力できるようにしておくと、さらに便利かもしれない。
data.json
[
{
":ID": 1,
":NAME": "name",
":TEXT": "text."
},
{
":ID": 2,
":NAME": "なまえ",
":TEXT": "テキスト。"
}
]
Grunt でプライベートタスクを定義する
で、Grunt 側にこんな感じのプライベートタスクを設定する。
Gruntfile.js
grunt.registerTask('make-html', 'make html.', function ()
{
var template = grunt.file.read('./src/template.html'),
data = grunt.file.readJSON('./src/data.json'),
item,
key,
reg,
html;
for (var i = 0, l = data.length; i < l; i++)
{
item = data[i];
html = template;
for (key in item)
{
reg = new RegExp(key, "ig");
html = html.replace(reg, item[key]);
}
grunt.file.write('./dest/'+ i + '.html', html, {force: true});
}
});
そんで grunt make-html とやるとHTMLファイルが生成される。
もちろん、HTMLじゃなくってもできる。
見てのとおり、JSONのキー名にマッチしたとこを置き換えるという、超シンプル機構。書き込みの機構はたぶんこの程度で必要十分な気がしました。
データをあれこれ操作できる自由度があるので、ここからアレンジすればいいのだと思います。
サンプル一式