gulp-html-tpl

本插件用于在 HTML 中引入其他 HTML 片段，同时支持多目录查询和模板渲染。

使用方法举例如下（参见 example）：

gulpfile.js：

const gulp = require('gulp');
const htmltpl = require('gulp-html-tpl');
const artTemplate = require('art-template');
 
gulp.task('default', function() {
    return gulp.src('html/component/index.html')
        .pipe(htmltpl({
            tag: 'template',
            paths: ['./html/common'],
            engine: function(template, data) {
                return artTemplate.compile(template)(data)
            },
            data: {
                useHeader: false
            },
            beautify: {
                indent_char: ' ',
                indent_with_tabs: false
            }
        }))
        .pipe(gulp.dest('./dist'));
});

html/component/index.html：

<template src="head.html" title="Hello World"></template>
<main>
    <template src="../common/main.html"></template>
</main>
<aside>
    <p>next file: component/index.html</p>
    <template src="phrase.html"></template>
    <p>next file: common/phrase.html</p>
    <template src="../common/phrase.html"></template>
</aside>
<template src="footer.html"></template>

html/common/head.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
</head>
<body>
 
{{if useHeader}}
    <template src="header.html"></template>
{{/if}}

其他文件略（参见 example 目录下的文件）。

注：以上模板语法视使用的模板引擎而定。

配置参数如下：

tag 引入模板的标签，默认为字符串 template
paths 字符串或数组，定义跨目录查找的目录路径
engine 模板渲染引擎函数
data 模板渲染的初始数据
beautify HTML美化参数，传递给 js-beautify 插件
dataTag本页默认数据标记标签（本页默认数据在渲染本页面之前以 eval() 执行并获得）
log 错误信息打印函数，值为 false 时不打印

跨目录查找

当模板中引入的子模板无法在当前目录及相对地址中查找到时，将从配置的 paths 目录中去查找（深遍历子目录）。文件索引的优先级是，当前目录最优，其后依次是 paths 中指定的目录。

模板渲染

插件支持用户自定义模板渲染引擎，在配置参数中，使用 engine 来定义渲染函数，该函数应当接受两个参数，第一个参数为模板，第二个参数为变量数据。

如无 engine，则不开启模板渲染功能。

模板数据

模板中的数据共三种来源：

在 Gulp 中配置 data 项作为初始数据

在模板标签中配置属性，如

<template
    useHeader
    toBool="false"
    toInt="2"
    src="header.html"
    title="Hello World"
></template>

将得到数据如下：

{
    useHeader: "useHeader",
    toBool: false,
    toInt: 2,
    src: 'header.html',
    title: 'hello world'
}

属性解析规则如下：

false 和 true 被视为 Boolean 类型
数字字符串被视为 Number 类型
如果属性无值，则值为 String 类型的属性名

模板标签的内容，如：

<template src="header.html">
{
    "useHeader": true,
    "toBool": false
}
</template>

标签内的内容将由 eval() 解析。此外，src 必须写在标签属性中。

或者，作如下定义：

<template src="header.html">
    <fragment id="varname">
        <a href="#">click here</a>
    </fragment>
</template>

将得到：

{
    varname: '<a href="#">click here</a>'
}

利用 fragment 可以很方便地传入 HTML 代码（提示：有的模板编译引擎有字符串转义功能，如果发现代码被转义，应当从模板引擎处查找问题。）

本页默认数据标签，如（当配置项 dataTag 值为 data 时）：
```

<data>{
  fav: "philosophy"
}</data>

<template src="book/${fav}.html"></template>
```
注意，由于本页默认数据先于模板被处理，因此定义本页默认数据标签在模板中有类似于“作用域提升”的效果，即当前页面使用数据渲染的代码可以写在用标签定义数据代码之前

所有数据将层层传递，从初始数据到父模板，再到子模板，优先级是：标签内容数据 > 标签属性 > 继承数据 > 本页默认数据。

HTML美化

内置调用了 js-beautify 插件，对最后的结果进行美化。默认定义了如下参数：

{
	indent_size: 4,
	indent_char: '\t',
	indent_with_tabs: true,
	preserve_newlines: true,
	max_preserve_newlines: 1
}

可通过配置项 beautify 覆盖本插件的默认配置和添加其他可用配置。详情请见 js-beautify 插件。

gulp-html-tpl

跨目录查找

模板渲染

模板数据

HTML美化

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Last publish

Collaborators

gulp-html-tpl

跨目录查找

模板渲染

模板数据

HTML美化

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads