Grunt で即席テンプレートエンジンが必要になったので、えいやっと作ってみた

7075 ワード
grunt Node.js Node.js テキストリンク

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のキー名にマッチしたとこを置き換えるという、超シンプル機構。書き込みの機構はたぶんこの程度で必要十分な気がしました。

データをあれこれ操作できる自由度があるので、ここからアレンジすればいいのだと思います。

サンプル一式