简介
gulp-apply-template 是一个适用于 Gulp 的 npm 包，可以将模板文件渲染成最终的 HTML 文件。它支持各种模板引擎，如 Handlebars, Mustache 等，能够满足前端开发中模板部分的要求，提高开发效率。
安装
在使用 gulp-apply-template 之前，需要先安装 gulp:
npm install -g gulp
然后，安装 gulp-apply-template：
npm install gulp-apply-template --save-dev
使用
引用 gulp 和 gulp-apply-template：
var gulp = require('gulp');
var applyTemplate = require('gulp-apply-template');然后，定义一个 task：
gulp.task('template', function () {
return gulp.src('src/templates/*.html')
.pipe(applyTemplate('src/data.json'))
.pipe(gulp.dest('dist/'));
});上面的 task 会将 src/templates/ 目录下的所有 HTML 文件都进行渲染，渲染所需的数据从 src/data.json 中读取，并将渲染后的文件保存在 dist/ 目录下。
模板引擎
gulp-apply-template 支持多种模板引擎，默认使用 Handlebars 模板引擎。如果需要使用其他模板引擎，可以通过传递 options 参数来指定。例如：
gulp.task('template', function () {
return gulp.src('src/templates/*.html')
.pipe(applyTemplate('src/data.json', {
engine: 'mustache'
}))
.pipe(gulp.dest('dist/'));
});上面的 task 会使用 Mustache 模板引擎进行渲染。
数据源
gulp-apply-template 需要一个数据源来进行渲染，数据源可以是一个 JSON 文件、一个 JavaScript 对象、一个函数等。例如：
gulp.task('template', function () {
return gulp.src('src/templates/*.html')
.pipe(applyTemplate({
title: 'Hello World',
name: 'John Doe'
}))
.pipe(gulp.dest('dist/'));
});上面的 task 会将 src/templates/ 目录下的所有 HTML 文件都进行渲染，渲染所需的数据从一个 JavaScript 对象中读取。
文件名
使用 gulp-apply-template 进行渲染时，可以指定输出文件名的格式。例如：
-- -------------------- ---- -------
--------------------- -------- -- -
------ --------------------------------
------------------------------------ -
------- -------- ------ -
------ -
-------- -------------
--------- ------------- - ------------
-------- -------
--
-
---
--------------------------
---上面的 task 会将渲染后的文件重命名为 .compiled.html 的文件，并保存在 dist/ 目录下。
命名空间
使用 gulp-apply-template 进行渲染时，可以指定命名空间。如果定义了命名空间，那么在模板中需要访问命名空间中的数据时，必须在变量名前添加命名空间的名称。例如：
gulp.task('template', function () {
return gulp.src('src/templates/*.html')
.pipe(applyTemplate('src/data.json', {
namespace: 'data'
}))
.pipe(gulp.dest('dist/'));
});上面的 task 使用 data 命名空间，并将 src/data.json 文件中的数据绑定到 data 变量中。在模板中访问 title 变量时，需要写成 {{ data.title }} 的形式。
示例
下面是一个完整的示例，使用 Handlebars 模板引擎对模板进行渲染。模板文件中使用了变量、表达式、判断语句等：
模板文件（src/templates/home.html）：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ----- ---------- ------- ------ ------ ----- ------- ----- ------- ------ ----- -------- ---------- -- -- ------ ------- ------- ------- -------
数据源文件（src/data.json）：
{
"title": "Hello World",
"content": "This is the content.",
"author": "John Doe"
}task:
var gulp = require('gulp');
var applyTemplate = require('gulp-apply-template');
gulp.task('template', function () {
return gulp.src('src/templates/*.html')
.pipe(applyTemplate('src/data.json'))
.pipe(gulp.dest('dist/'));
});运行 gulp template 后，生成的渲染后的文件（dist/home.html）：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------ ------------- ------- ------ --------- ---------- ------- -- --- ------------ ---------- -- ---- -------- ------- -------
总结
gulp-apply-template 帮助我们轻松地将模板文件渲染成最终的 HTML 文件，支持各种模板引擎，并提供了丰富的选项，可以灵活地满足不同的需求。在前端开发中，使用 gulp-apply-template 可以极大地提高开发效率，值得推荐。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac5bb5cbfe1ea06109dd