浏览器支持

把jade编译为一个可供浏览器使用的单文件,只需要简单的执行:

  1. $ make jade.js

如果你已经安装了uglifyjs (npm install uglify-js),你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。

  1. $ make jade.min.js

默认情况下,为了方便调试Jade会把模板组织成带有形如 __.lineno = 3 的行号的形式。 在浏览器里使用的时候,你可以通过传递一个选项{ compileDebug: false }来去掉这个。 下面的模板

  1. p Hello #{name}

会被翻译成下面的函数:

  1. function anonymous(locals, attrs, escape, rethrow) {
  2. var buf = [];
  3. with (locals || {}) {
  4. var interp;
  5. buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>');
  6. }
  7. return buf.join("");
  8. }

通过使用Jade的 ./runtime.js你可以在浏览器使用这些预编译的模板而不需要使用Jade, 你只需要使用runtime.js里的工具函数, 它们会放在jade.attrs, jade.escape 这些里。 把选项 { client: true } 传递给 jade.compile(), Jade 会把这些帮助函数的引用放在jade.attrs, jade.escape.

  1. function anonymous(locals, attrs, escape, rethrow) {
  2. var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;
  3. var buf = [];
  4. with (locals || {}) {
  5. var interp;
  6. buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>');
  7. }
  8. return buf.join("");
  9. }