简介
gulp-template 是一个用于处理 HTML 模板的 Gulp 插件。它可以帮助开发者将变量注入到 HTML 模板中，从而生成最终的 HTML 文件。本文将详细介绍如何使用 gulp-template 实现 HTML 模板的自动化处理。
安装
在开始使用 gulp-template 之前，需要先安装它。可以通过 npm 进行安装：
npm install --save-dev gulp-template
使用方法
使用 gulp-template 的方法非常简单。首先，需要在 Gulpfile.js 中引入 gulp-template：
const template = require('gulp-template');接着，我们可以使用 template 方法来处理 HTML 文件。假设我们有一个 index.html 文件，其中包含了一些占位符，我们需要将这些占位符替换成具体的值，例如页面标题、网站名称等。我们可以在 Gulpfile.js 中添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
------------------ -- -- -
------ --------------------------
----------------
------ --- ---------
--------- -----------------
---
-------------------------
---上述代码中，我们首先使用 gulp.src 方法读取源文件 src/index.html，然后使用 template 方法将模板中的占位符替换为指定的值。最后，使用 gulp.dest 将处理后的文件保存到目标路径 dist 中。
参数说明
gulp-template 支持多种参数设置，可以满足不同的需求。以下是 template 方法支持的所有参数：
engine
指定要使用的模板引擎，默认为 lodash。
template({
engine: 'handlebars'
})locals
指定要注入到 HTML 文件中的变量。可以通过对象形式传递多个变量。
template({
locals: {
title: 'My Website',
siteName: 'www.example.com'
}
})options
指定模板引擎的配置选项。
template({
options: {
interpolate: /{{([\s\S]+?)}}/g
}
})extname
指定输出文件的扩展名，默认为 .html。
template({
extname: '.php'
})示例代码
以下是一个完整的 Gulpfile.js 示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------- - -------------------------
------------------ -- -- -
------ --------------------------
----------------
------ --- ---------
--------- -----------------
---
-------------------------
---在运行 gulp build 命令之后，将会生成一个处理后的 index.html 文件，其中占位符已经被具体的值替换了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41161