模板预处理
本插件为gulp插件,适用于utryui相关的模板替换任务。
可处理使用utry.define()创建的组件和使用typescript或es6编写的组件。
注意,仅支持处理UTF8编码格式的文件。模板文件和脚本文件的编码格式都需要使用UTF-8。
如果文件编码格式不正确,请自行将其转码后再使用本插件。
// 加载插件 var tplTools = ; // 创建一个gulp构建任务,用于模板替换 gulp;
配置参数
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 AnotherModule <!-- 组件的名称,必须是单独的一行,且以 # 号开头 --> <!-- 一个模板文件里面,可以声明多个组件的模板 --> <!-- 根据模板文件生成代码文件时,如果模板文件里的模板片段全部属于同一个组件,在没有声明组件名时,默认取模板文件名作为组件的名称 --> # Component <!-- 组件的模板片段名称,同样必须是单独的一行,且以 @ 号开头 --> @ template This is a template. <!-- 如果紧邻上一个模板片段声明,再次遇到了同名的模板声明,则表明此模板片段的定义在此处结束 --> <!-- 否则,该模板片段的结束位置为遇到下一个模板片段声明时,或者到达文件的结尾 --> @ template 这里的内容会被丢弃,因为上面的声明已表明 template 模板片段结束 <!-- 组件中的其他模板片段声明 --> @ anotherTemplate This is a template. <!-- 一个模板文件中可以包含多个组件的模板定义 --> <!-- 同样如果使用模板文件生成 ts 代码文件,也可以通过 extends 关键字声明组件所继承的父类 --> # AnotherComponent extends Component <!-- 如果组件仅包含一个模板片段,在没有声明该模板的名称时,默认取 template 作为其模板名称(主模板) --> This is a template. <!-- 另外,模板定义也可以放在一个完整HTML页面的<body>标签下,插件在处理时会从<body>标签下提取模板内容 -->