jade(pug)内で使うHTMLに変数を使えるようにする。

jade(pug)は整形フォーマットを細かく指定できないのでどうにかならないか考えてみました。

追記 2016/9/2
gulpに登録したら動かなかったのでgulp-jade対策したものを追加しました。
追記 2016/9/3
→ この後知ったことなのですが、jadeのfilter機能を使うのがよさそうです。

コマンドラインjade版

• jade

.test
  -  var val1 = "hoge";
  -  var val2 = "fuga";
  -
    var b = `<ul>
        <li>${val1}</li><!--
        --><li>${val2}</li>
    </ul>`;
  !=b

• html

<div class="test"><ul>
    <li>hoge</li><!--
    --><li>fuga</li>
</ul>
</div>

これでHTMLを直接テンプレートかきるejsの優位性がなくなりそう

配列などの変数を改行させる方法
http://chaika.hatenablog.com/entry/2015/10/29/080000

を参考しました。

gulp-jade対応版

.test
  - 
  -  var data = {url: 'http://github.com',title: 'GitHub',description: '便利'};
  -
    var template = (function() {/*
    <ul><!--
    --><li>${url}</li><!--
    --><li>${title}</li><!--
    --><li>${description}</li><!--
    --></ul>
    */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\n|\r/g, "");
  -
    var html = template.replace(/\${(\w+)}/g, function(m, key) {
      var text = data[key] || '';
      return text;
    }).replace(/-->/g, '\n-->');
  !=html

<div class="test"><ul><!--
--><li>http://github.com</li><!--
--><li>GitHub</li><!--
--><li>便利</li><!--
--></ul>
</div>