gulp构建项目（六）：gulp-html-tpl处理公用模板
需求分析：多页面应用，html模板的meta、link、title、script都有通用的部分，包括header和footer。那么，
- 如何提取通用部分，如何引用
- 如何处理不同的部分（比如部分页面需要单独引用文件）
一、安装gulp-html-tpl、art-template模块
说明：gulp-html-tpl配置的时候需要使用art-template进行数据渲染
npm i -D gulp-html-tpl art-template
二、gulp-html-tpl配置使用
1、gulp-html-tpl参数说明
/**
* @param tag 引入模板的标签，默认为字符串 template
* @param paths 字符串或数组，定义跨目录查找的目录路径
* @param engine 模板渲染引擎函数
* @param data 模板渲染的初始数据
* @param beautify HTML美化参数，传递给 js-beautify 插件
* @param dataTag 本页默认数据标记标签 （本页默认数据在渲染本页面之前以 eval() 执行并获得）
* @param log 错误信息打印函数，值为 false 时不打印
*/
htmltpl({
tag: '',
paths: glob,
engine: fn,
data: {},
beautify: {},
dataTag: '',
log: fn
})
2、gulp-html-tpl配置
gulpfile.js
var htmltpl = require('gulp-html-tpl'); // 引用html模板
var artTemplate = require('art-template'); // 模板渲染
gulp.task('html', function() {
return gulp.src('./src/*.html')
.pipe(htmltpl({
tag: 'template',
paths: ['./src/common'],
engine: function(template, data) {
return template && artTemplate.compile(template)(data);
},
data: { //初始化数据
header: false,
g2: false
}
}))
.pipe(gulp.dest('./dist'));
});
三、gulp-html-tpl通用模板定义
1、语法说明
- 模板中的语法遵循的是art-template的语法规则；
- 模板中使用的数据对应htmltpl()中的data；
2、创建common文件夹，新建header.html和footer.html文件
common/header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.min.css">
<title>{{title}} - gulp教程</title>
</head>
<body>
{{if header}}
<header>
<h1>header</h1>
</header>
{{/if}}
common/footer.html
<footer>
<h1>footer</h1>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/template.min.js"></script>
{{if g2}}
<script src="js/data-set.min.js"></script>
<script src="js/g2.min.js"></script>
{{/if}}
<script src="js/main.min.js"></script>
</body>
</html>
四、gulp-html-tpl模板引用
1、引用说明
- 采用标签的方式引用，标签名对应htmltpl()里的tag；
- src路径对应需要引用的模板名称，具体路径指向已经在htmltpl()中的path指定了；
- 通过设置属性值传递参数：如title、header、g2
2、html文件修改结果如下：
index.html
<template src="header.html" title="首页" header></template>
<section>
<h1>我是index页面</h1>
<a href="./center.html">jump to center.html</a>
<a href="./shop.html">jump to shop.html</a>
<div class="box">
<span>1</span>
<span>2</span>
</div>
</section>
<template src="footer.html" g2></template>
center.html
<template src="header.html" title="个人中心"></template>
<section>
<h1>我是center页面</h1>
<button class="btn">button</button>
</section>
<template src="footer.html"></template>
五、执行npm run dev，查看打包后的文件
对比dist/index.html和dist/center.html文件，看看有什么不同
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.min.css">
<title>首页 - gulp教程</title>
</head>
<body>
<header>
<h1>header</h1>
</header>
<section>
<h1>我是index页面</h1>
<a href="./center.html">jump to center.html</a>
<a href="./shop.html">jump to shop.html</a>
<div class="box">
<span>1</span>
<span>2</span>
</div>
</section>
<footer>
<h1>footer</h1>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/data-set.min.js"></script>
<script src="js/g2.min.js"></script>
<script src="js/main.min.js"></script>
</body>
</html>
dist/center.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.min.css">
<title>个人中心 - gulp教程</title>
</head>
<body>
<section>
<h1>我是center页面</h1>
<button class="btn">button</button>
</section>
<footer>
<h1>footer</h1>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.min.js"></script>
</body>
</html>
.
项目地址（别忘了给星哦）
https://github.com/shiguang0116/gulp-project
相关文章
gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题