star-tools-tpl
v1.1.6
Published
A plugin of gulp to help merge template from html file.
Downloads
30
Readme
模板预处理
本插件为gulp插件，适用于utryui相关的模板替换任务。
可处理使用utry.define()创建的组件和使用typescript或es6编写的组件。
注意，仅支持处理UTF8编码格式的文件。模板文件和脚本文件的编码格式都需要使用UTF-8。
如果文件编码格式不正确，请自行将其转码后再使用本插件。
// 加载插件
var tplTools = require('star-tools-tpl');
// 创建一个gulp构建任务，用于模板替换
gulp.task("template-insert", function () {
return gulp.src([
"src/ts/*.ts"
]).pipe(tplTools({
// 语言类型
language: "typescript",
// 模板文件扩展名
tplExt: '.html',
// 模板文件路径
tplPath: './tpl/',
// 输出路径
output: 'out',
// 访问修饰符（类型语言时）
modifiers: "static"
}))
// 输出至下一个插件处理流
.pipe(gulp.dest("src/ts"));
});配置参数
task - 插件任务类型。默认为根据输入的 代码文件 执行 模版替换 任务。当参数值为 init 时，则根据输入的 模板文件 执行 代码生成 任务。
output - 指定文件输出路径。为 模版替换 任务时，默认替换 原代码 文件。为 代码生成 任务时，默认输出至模板文件所在目录。为避免生成的代码文件覆盖原代码文件造成代码丢失，本插件不会生成已经存在的代码文件。
tplExt - 执行 模板替换 任务时，指定 模板文件 的扩展名。默认为 .html 。
tplPath - 执行 代码生成 任务时，指定 模板文件 的目录路径。默认为当前脚本文件所在的目录。
language - 生成代码文件时使用的语言类型。默认为 js。可指定为 ts 。
openTag - 生成代码时，解析模板时用到的语法 开始 标记。默认为 {{ 。
closeTag - 生成代码时，解析模板时用到的语法 结束 标记。默认为 }} 。
comments - 生成代码时，是否输出代码行 注释 。默认为 true 。
references - 生成代码时，在代码文件顶部引入的模块路径。默认引入 core/Component 。也可在模板文件中通过相应标记来声明。
namespace - 生成代码时，声明的模块命名空间。默认为 utry 。
export - 生成代码时，是否导出组件类。默认为 true 。
extends - 生成代码时，组件的继承类。默认为 Component 。也可以在模板文件中通过相应标记来声明。
implements - 生成代码时，组件的接口实现列表。一般很少使用接口继承。
modifiers - 生成代码时，组件模板属性访问修饰符。默认为 static 。
log - 是否在控制台打印任务日志。默认为 true 。
verbose - 是否打印详细的任务日志信息。默认为 false 。
help - 是否打印本配置说明。默认为 true 。模板文件格式
<!-- HTML注释块部分不会生成进代码文件中去 -->
<!-- 生成 ts 文件时的模块引用声明，下面两种格式任选 -->
<!-- 如果没有声明模块引用，则默认会引用 core/Component -->
<!-- 如果根据模板文件仅生成纯 js 的代码文件，则不需要声明模块引用（声明了也没用处） -->
/// <reference path='core/Component'/>
/// reference AnotherModule
<!-- 组件的名称，必须是单独的一行，且以 # 号开头 -->
<!-- 一个模板文件里面，可以声明多个组件的模板 -->
<!-- 根据模板文件生成代码文件时，如果模板文件里的模板片段全部属于同一个组件，在没有声明组件名时，默认取模板文件名作为组件的名称 -->
# Component
<!-- 组件的模板片段名称，同样必须是单独的一行，且以 @ 号开头 -->
@ template
<div>
<h1>This is a template.</h1>
<input value="{{user.name}}" onchange="{{ handleInputChange(this) }}">
</div>
<!-- 如果紧邻上一个模板片段声明，再次遇到了同名的模板声明，则表明此模板片段的定义在此处结束 -->
<!-- 否则，该模板片段的结束位置为遇到下一个模板片段声明时，或者到达文件的结尾 -->
@ template
<section>
<header>
这里的内容会被丢弃，因为上面的声明已表明 template 模板片段结束
</header>
</section>
<!-- 组件中的其他模板片段声明 -->
@ anotherTemplate
<footer>
This is a template.
</footer>
<!-- 一个模板文件中可以包含多个组件的模板定义 -->
<!-- 同样如果使用模板文件生成 ts 代码文件，也可以通过 extends 关键字声明组件所继承的父类 -->
# AnotherComponent extends Component
<!-- 如果组件仅包含一个模板片段，在没有声明该模板的名称时，默认取 template 作为其模板名称（主模板） -->
<div>
This is a template.
<input value="{{user.name}}">
<input type="date" value="{{user.birth | formatDate : 'yyyy-MM-dd'}}">
</div>
<!-- 另外，模板定义也可以放在一个完整HTML页面的<body>标签下，插件在处理时会从<body>标签下提取模板内容 -->