利用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方法一样

posted @ 2015-08-19 14:58  灵瞳  阅读(349)  评论(0编辑  收藏  举报