gruntで、Jadeで書いたテンプレートに、JSONで用意したデータを流し込んでページを量産する

ディレクトリ構造はこんな感じ。
納品時には_development/ 以下を外せばいい状態にしたくて、gruntは_development/ にインストールしている。sassファイルなんかも_development以下に設置している。

htdocs/
　_development/
　　jade/
　　json/
　　node_modules/
　　Gruntfile.js
　　package.json
　css/
　js/
　index.html
　...

そして、grunt-contrib-jadeをインストールする。
（node.js, gruntのインストールは端折ります）

npm install grunt-contrib-jade --save-dev

gruntタスクを書く

Gruntfile.jsに以下のように書く

Gruntfile.js

grunt.initConfig({
//...
jade: {
    compile: {
        options: {
            pretty: true, //htmlをインデント表記させる
            data: function(dest, src){ //dest が生成するhtml、srcが参照元jadeファイル
                var data_file = "./json/data.json";

                //生成するhtmlのファイル名によって、使用するJSONデータを変える
                if( dest.match('index') ){
                    data_file = "./json/data_index.json";
                }else if( dest.match('page1') ){
                    data_file = "./json/data_page1.json";
                }
                //...
                return require(data_file);
            }
        },
        files: {
            "../index.html": "jade/index.jade",
            "../page1.html": "jade/page1.jade"
        }
    }
}
//...
});

grunt.loadNpmTasks('grunt-contrib-jade');

何をしているかというと、
index.jade に書いたテンプレートに data_index.json というデータを流し込み、index.htmlを作る。
同じく、
page1.jade に書いたテンプレートに data_page1.json というデータを流し込み、page1.htmlを作る。
以下同様・・・

これで準備完了。gruntタスクを動かす。

grunt jade:compile

これで無事に各HTMLが生成されるはず。

もうちょっとすっきりさせてみる

参照元Jadeファイルと生成htmlファイルの対照関係を記述する jade.compile.files と、
流し込むデータJSONを設定するjade.compile.options.data の部分が冗長なので、
別ファイルに分けてやる。

Gruntfile.js

jade: {
    compile: {
        options: {
            pretty: true,
            data: require('./jade.js')
        },
        files: require('./json/pagelist.json')
    }
}

これで、いろいろタスクを書いてるGruntfile.jsはすっきり。
次に流し込むデータを指定する関数は jade.js という別ファイルにする。

jade.js

//流し込むデータ(JSON)を指定してやる関数
module.exports = function(dest, src) {
    var data_file = "./json/data.json";
    if(dest.match('index')){
        data_file = "./json/data_index.json";
    }else if(dest.match('page1')){
        data_file = "./json/data_page1.json";
    }
    return require(data_file);
}

参照元jadeファイルと生成htmlのページリストはpagelist.jsonというJSONファイルを用意。

pagelist.json

{
    "../index.html": "jade/index.jade",
    "../page1.html": "jade/page1.jade"
}

サーバサイドのフレームワークなどがない環境で、静的なページを大量に作成しなければいけないときも楽に量産できる。

ちなみに、私はJadeファイルをwatchして、変更後すぐさまコンパイルしてhtml生成させ、
さらに、htmlの変更をwatchして、livereloadするという環境にしている。