0.2.2 • Published 10 years ago
grunt-tpljson v0.2.2
grunt-tpljson v0.2.2
Concat files from tpl(HTML) to json(Minify HTML)
Getting Started
This plugin requires Grunt ~0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-tpljson
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-tpljson');
说明
- 循环
options.src
下的文件目录,查找.tpl文件,生成json格式,合并压缩 - 单个tpl转换生成的json的key为其文件名,合并后
.tpl.js
的文件名为目录名,所以不允许.tpl
文件直接暴露在options.src
目录下 - 出于json格式化,会替模板内的
'
单引号为"
Example config
grunt.initConfig({
tpljson: {
dist: {
options: {
src: 'test/src',
srcExt: '.tpl',
dest: 'test/dist',
destExt: '.tpl.js',
separator: ',',
jsonp: 'jstpl'
}
}
}
});
grunt.registerTask('default', ['tpljson']);
Options
Option | Description | Default |
---|---|---|
src | 源目录 | - |
srcExt | 目录下匹配文件的后缀 | .tpl |
dest | 合并导出目录 | - |
destExt | 合并导出文件后缀 | .tpl.js |
separator | 合并文件的分割符号 | , |
jsonp | jsonp的callback命名 | jstpl |
测试
src源目录
test/src
├── delivery
│ ├── delivery.tpl
│ └── address.tpl
│
└── dian
└── dian.tpl
└── dian_list.tpl
- address.tpl
<div class="address_wrap">
文一西路
</div>
- delivery.tpl
<div class="delivery">
<div class="<%=sort_id=="0"?:"current":""%>">1</div>
</div>
- dian.tpl
<div class="dian">
dian here
</div>
- dian_list.tpl
<div class="dian_list">/*注释*/
</div>
build后生成
test/dist
├── delivery.tpl.js
└── dian.tpl.js
- delivery.tpl.js
jstpl({'address':'<div class="address_wrap">文一西路</div>','delivery':'<div class="delivery"><div class="<%=sort_id=="0"?:"current":""%>">1</div></div>'})
- dian.tpl.js
jstpl({'dian':'<div class="dian">dian here</div>','dian_list':'<div class="dian_list">/*注释*/</div>'})
Release History
- 2014-10-2 v0.2.2 增加
'
替换"
- 2014-7-18 v0.2.1 补充测试用例,文档更新
- 2014-7-16 v0.2.0 Initial release
- 2014-7-15 v0.1.0 demo