star-tools-tpl

1.1.6 • Public • Published

模板预处理

本插件为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>标签下提取模板内容 -->

Readme

Keywords

none

Package Sidebar

Install

npm i star-tools-tpl

Weekly Downloads

1

Version

1.1.6

License

ISC

Last publish

Collaborators

  • star2018