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 插件。

Keywords

FAQs

What is gulp-html-tpl?

Is gulp-html-tpl popular?

Is gulp-html-tpl well maintained?

Package last updated on 13 Sep 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install