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

转载于:https://www.cnblogs.com/lingtong/p/4742234.html