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するという環境にしている。