利用grunt+browserify预编译js模板文件,支持commonJS加载
在使用undersocre.js的模板时,有个显著问题,就是要把html代码写到js文件里面,非常痛苦,一不留神写错了,导致各方面问题。
而且,如果要修改模板,就会非常麻烦而且容易出错。
有没有一种方法可以实现把模板文件放在单独文件里,用的时候直接加载过来呢?
最初,我采用了seajs的text插件,或者requireJS的text插件来动态加载模板,感觉棒棒哒!
但是,动态加载text,导致于每个模板都要发一次请求去加载(seajs优化过后可以合并),而且加载过来的是字符串,还要模板引擎
执行后才能渲染数据,比较耗费性能。
随着项目的迁移,我们开始放弃cmd和amd,觉得commonJS会更顺手,我们的模块化工具换成了browerify,静态打包编译的方式
更快更好用,我们通过使用grunt去自动打包编译,然后,那个模板加载的问题也顺带得到了很好的解决,只用在配置任务的时候
browserify:{ coffee:{ files:[{ expand: true, cwd: 'coffee/src', src: '**/*.coffee', dest: 'bin', ext: '.js' }], options:{ transform:['coffeeify','node-underscorify'] } } }
使用:
tpl.html <div><%=name%></div> <div><%=action%></div> main.js tpl=require('./tpl.html'); tpl({name:'li sa',action:'eat'});
模板的规则和undercore.js的template方法一样