Jadeifyを使ってみた

個人的にもう生のHTMLを書く事が無くて、諸々条件が許す限りJadeを使用している。
Jadeifyを使用すればjadeファイルを、htmlに変換してテンプレートとしてbrowserifyのビルドで生成するjs内に展開してくれるようなので、テストを読みつつ試してみる。

インストール

今回はgruntから使用した。
grunt-browserifyとかJade諸々が事前に入ってるとして。

npm install jadeify

設定

browserifyのタスクの記述のところで、optionsでtransformのoptionsに'jadeify'を追記する

Grunt.js

//該当部分抜粋
      browserify: {
        app: {
          files: {
            'app/public/js/app.js': ["frontend/*.js", "frontend/*.coffee"]
          },
          options: {
            require: true,
            transform: ['coffeeify', 'jadeify']//<-ココ
          }
        }
      }

使う

underscoreのテンプレートの使い方に似ている。
jadeファイルをrequireするとコンパイル済みのテンプレート関数を返してくるので、
jade内の変数名をキーに、出力したい内容を値にしたオブジェクトをパラメータにして実行する。

main.js

var template = require('./test.jade');
var result = template({foo:"This is a TEST!!!"});
console.log(result);

test.jade

p= foo

browserifyのビルドが成功して、ブラウザで見るとコンソールに

<p>This is a TEST!!!</p> 

と出る。

テストはシンプルな例しかなかったけど、関数を渡したり、通常のJadeと同様for文や#{}の変数展開もできた。

main.js

var template = require('./templates/entries.jade');

var entries = [
  {
    id: 1,
    title: function() {
      return "works";
    },
    link: "http://examples.co.jp/works/"
  }, {
    id: 2,
    title: function() {
      return "people";
    },
    link: "http://examples.co.jp/people/"
  }, {
    id: 3,
    title: function() {
      return "careers";
    },
    link: "http://examples.co.jp/careers/"
  }
];

var result = template({
  entries: entries
});

console.log(result);

templates/entries.jade

for entry, index in entries
    tr
        td= entry.id
        td= entry.title()
        td
            a(href="#{entry.link}", target="_blank") #{entry.link}

を同じくビルドすると

<tr>
  <td>1</td>
  <td>works</td>
  <td>
    <a href="http://examples.co.jp/works/" target="_blank">http://examples.co.jp/works/</a>
  </td>
</tr>
<tr>
  <td>2</td>
  <td>people</td>
  <td>
    <a href="http://examples.co.jp/people/" target="_blank">http://examples.co.jp/people/</a>
  </td>
</tr>
<tr>
  <td>3</td>
  <td>careers</td>
  <td>
    <a href="http://examples.co.jp/careers/" target="_blank">http://examples.co.jp/careers/</a>
  </td>
</tr> 

という結果が得られた。

追記

2014/7/30
コメントにてご指摘いただきました。
jadeifyはbrowserifyのビルド後に出力するjsにてjavascript1.8.5以降のメソッドを使っているので、そのメソッドに対応していないレガシーなブラウザ(IE8等)ではこのまま実行してもエラーになります。
ご注意ください。