express-jade-compiled
将 jade 模版编译好并用AMD规范包装好,供前端使用。
它是一个 express 中间件,需求express 4.x.
install
npm install express-jade-compiled
API
jade_compiled(path, opts);
例:
var jade_compiled = require('express-jade-compiled');
app.use('/jade_compiled',jade_compiled(path.join(__dirname, 'jade_compiled')));
app.use('/jade_compiled',
jade_compiled(path.join(__dirname, 'jade_compiled'),{
maxAge: 0 ,
watch:true,
uglify:false
});
特性://-COMPONENT
新加了//-COMPONENT标识来分割模版,以达到多重利用的目地。
jade未加//-COMPONENT
编译后:
define(function() {
return function tpl(locals) {
var buf = [];
var jade_mixins = {};
var jade_interp;
buf.push("<h1>hello</h1><h1>world</h1>");;
return buf.join("");
}
})
jade加上//-COMPONENT
//-COMPONENT hello
h1 hello
//-COMPONENT world
h1 world
编译后:
define(function() {
return {
"hello": function tpl1(locals) {
var buf = [];
var jade_mixins = {};
var jade_interp;
buf.push("<h1>hello</h1>");;
return buf.join("");
},
"world": function tpl2(locals) {
var buf = [];
var jade_mixins = {};
var jade_interp;
buf.push("<h1>world</h1>");;
return buf.join("");
}
}
})
jade runtime.js
前端需要引用Jade的runtime.js,本项目已压缩好了一个(3KB),并提供了一个静态属性:jade_runtime_min_path
你可以:
app.use('/jade_runtime_min.js', express.static(jade_compiled.jade_runtime_min_path));
客户端引用示例
<!DOCTYPE html>
<html>
<head>
<script src="/jade_runtime_min.js"></script>
<script src="require.js"></script>
</head>
<body>
<script type="text/javascript">
require('/jade_compiled/some.jade', function(tpl){
document.write(tpl());
})
</script>
</body>
</html>
QA
1.为什么我修改了模版,但没有生效?
答:这一定是文件名大小写与请求路径不一致导致的。