LoginSignup
7
6

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-03-18

jade とか ejs とかもいいんだけど、もっとシンプルにやりたいなっと思って。

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

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

サンプル一式

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6