# star-tools-tpl

> A plugin of gulp to help merge template from html file.

Latest version **1.1.6** (published 2016-12-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install star-tools-tpl
pnpm add star-tools-tpl
yarn add star-tools-tpl
bun add star-tools-tpl
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2016-12-20 |
| First published | 2016-10-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | star |
| Maintainers | star2018 |

## Links

- npm: https://www.npmjs.com/package/star-tools-tpl
- Repository: https://github.com/star2018/star-tools-tpl
- Homepage: https://github.com/star2018/star-tools-tpl#readme
- Issues: https://github.com/star2018/star-tools-tpl/issues
- npm.io page: https://npm.io/package/star-tools-tpl

## Dependencies (6)

- [ejs](https://npm.io/package/ejs.md) ^2.5.2
- [through2](https://npm.io/package/through2.md) ^2.0.1
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.7
- [graceful-fs](https://npm.io/package/graceful-fs.md) ^4.1.9
- [node.extend](https://npm.io/package/node.extend.md) ^1.1.6
- [vinyl-bufferstream](https://npm.io/package/vinyl-bufferstream.md) ^1.0.1

## Recent versions

- 1.1.6 (latest) — 2016-12-20
- 1.1.5 — 2016-10-14
- 1.1.4 — 2016-10-06
- 1.1.3 — 2016-10-06
- 1.1.2 — 2016-10-06
- 1.1.1 — 2016-10-05
- 1.1.0 — 2016-10-05
- 1.0.12 — 2016-10-05
- 1.0.11 — 2016-10-05
- 1.0.10 — 2016-10-04
- 1.0.9 — 2016-10-04
- 1.0.8 — 2016-10-04
- 1.0.7 — 2016-10-02
- 1.0.6 — 2016-10-02
- 1.0.5 — 2016-10-02
- … 4 more at https://npm.io/package/star-tools-tpl/versions

## README

### 模板预处理

本插件为gulp插件，适用于utryui相关的模板替换任务。

可处理使用utry.define()创建的组件和使用typescript或es6编写的组件。

注意，仅支持处理UTF8编码格式的文件。模板文件和脚本文件的编码格式都需要使用UTF-8。

如果文件编码格式不正确，请自行将其转码后再使用本插件。

````js
    // 加载插件
    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"));
    });
````

### 配置参数

````html
    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
    <!-- 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>标签下提取模板内容 -->
````

---
_Source: https://npm.io/package/star-tools-tpl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._