grunt-tpl-compiler
v0.1.6
Published
Grunt plugin for juicer-based template compile to kissy module
Downloads
14
Readme
grunt-tpl-compiler
Grunt plugin for juicer-based template compile to kissy module
将基于 juicer 语法的模板文件编译为 KISSY 模块。
Getting Started
This plugin requires Grunt ~0.4.2
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-tpl-compiler --save-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-tpl-compiler');The "tpl_compiler" task
Overview
In your project's Gruntfile, add a section named tpl_compiler to the data object passed into grunt.initConfig().
grunt.initConfig({
tpl_compiler: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});Options
options.ext
Type: String
Default value: 'tpl'
生成 js 文件的后缀字符串
Usage Examples
Default Options
In this example, the default options are used to do something with whatever. So if the testing file has the content Testing and the 123 file had the content 1 2 3, the generated result would be Testing, 1 2 3.
grunt.initConfig({
tpl_compiler: {
options: {
ext: '-tpl',
replaceEscapeMap: {
'\xB0': '°'
}
},
main: {
files: [
{
expand: true,
cwd: 'src/',
src: ['**/*.tpl.html'],
dest: 'src/'
}
]
}
},
});词汇
- HTML 模板文件
- 一个普通的 HTML 文件，其中以 juicer 语法书写要用到的模板文件，模板文件通过 DOM 节点的
data-tpl属性指定各个模板的钩子。
- 一个普通的 HTML 文件，其中以 juicer 语法书写要用到的模板文件，模板文件通过 DOM 节点的
- JavaScript 模板文件
- 从 HTML 模板文件生成的对应的 JavaScript 文件，该文件为一个普通的 KISSY 模块，对 HTML 模板文件中的各个模板进行抽离，对外暴露
get、set、register、render方法以读写模板字符串。 - 一个 HTML 模板文件对应生成一个 JavaScript 模板文件。
- 从 HTML 模板文件生成的对应的 JavaScript 文件，该文件为一个普通的 KISSY 模块，对 HTML 模板文件中的各个模板进行抽离，对外暴露
使用方法
在 "src" 目录下的指定 HTML 模板文件中编辑，根据 grunt config 中的
main->files->src指定，如上面的**/*.tpl.html即为.tpl.html后缀的 html 文件视为需要处理的 HTML 模板文件，示例：[src/pages/index.tpl.html]
... <body> <div class="page"> <div id="J_Test" data-tpl="ProdList"> <h2>${title}</h2> <ul class="prod-list"> {@each prods as prod} <li class="prod-item">${prod.name} - ${prod.price}</li> {@/each} </ul> </div> <div class="test2"> <section data-tpl="MoreList"> <dl> {@each moreList as item} <dt>${item.title}</dt> <dd>${item.desc}</dd> {@/each} </dl> </section> </div> </div> </body>其中指定了两个模板：
<div id="J_Test" data-tpl="ProdList">...</div>和<section data-tpl="MoreList"></section>。执行
grunt tpl_compiler，生成对应的 JavaScript 模板文件：[src/pages/index-tpl.js]
/** * KISSY Template Module for test */ KISSY.add(function (S, Juicer) { 'use strict'; /** * 维护所有用到的模板 * @class Template * @constructor */ var templates = { ProdList: '<div id="J_Test" data-tpl="ProdList"><h2>${title}</h2><ul class="prod-list">{@each prods as prod}<li class="prod-item">${prod.name} - ${prod.price}</li> {@/each} </ul></div>', MoreList: '<section data-tpl="MoreList"><dl>{@each moreList as item}<dt>${item.title}</dt><dd>${item.desc}</dd> {@/each} </dl></section>' }; return { /** * 注册模板自定义函数 * @param name 需要替换的模板中用到的名字 * @param fn 自定义函数 */ register: function (name, fn) { Juicer.register(name, fn); }, /** * 覆盖已有模板 * @param key {String} template 模板键 * @param tmpl {String} 模板 */ set: function (key, tmpl) { templates[key] = tmpl; }, /** * 获取已有模板 * @param key {String} 模板Key * @returns {String} 模板内容 */ get: function (key) { return templates[key]; }, /** * 根据指定的模板key和数据渲染生成html * @param key 模板的key * @param data json数据 * @returns {String} */ render: function (key, data) { return Juicer(templates[key], data); } }; }, { requires: ['gallery/juicer/1.3/index'] });这样其他模块中需要依赖模板的地方，直接通过 KISSY 模块
require该 JavaScript 模板文件即可，通用的register方法也可以写在该 JavaScript 模板文件中。修改
src/pages/index.tpl.html，重新构建后生成的src/pages/index-tpl.js中 只会覆盖var templates = {...}部分。因此如果直接修改src/pages/index-tpl.js中除var templates = {...}的部分，重新构建时修改内容 会保留而不会被覆盖掉。建议将该任务加入到
watch中实时编译模板文件，保证本地服务实时取的是最新的模块。
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
- [0.1.6] fix for
this.files.srcisArray. - [0.1.4] 用 cheerio 替换 jsdom，避免 windows 下 jsdom 安装失败，移除 htmlmin
- [0.1.3] Bugfix for html escape
- [0.1.0] 基本功能完成