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