前言
在前端开发中，经常需要将数据和模板结合生成 HTML 文档，而 ejs 是一个流行的模板引擎。而 gulp 是一个流式构建工具，可以将多个任务组合在一起，进行前端构建工作。gulp-ejs 这个 npm 包，是将 gulp 和 ejs 结合在一起的工具，可以自动编译 ejs 模板。
本文将介绍如何配置和使用 gulp-ejs，让你更加方便地完成前端开发工作。
安装 gulp-ejs
首先，我们需要在项目中安装 gulp 和 gulp-ejs。在项目根目录下执行以下命令：
npm install --save-dev gulp gulp-ejs
我们使用了 --save-dev 参数，表示这两个包只用于开发过程中，不需要在生产环境中使用。
使用 gulp-ejs
gulp-ejs 的主要作用是将 ejs 模板编译为 HTML 文件。为此，我们需要创建一个 gulp 任务。
在项目的根目录下，创建一个名为 gulpfile.js 的文件，输入以下内容：
const gulp = require('gulp');
const ejs = require('gulp-ejs');
gulp.task('ejs', () => {
return gulp.src('src/*.ejs')
.pipe(ejs())
.pipe(gulp.dest('dist'));
});这个 gulp 任务名为 ejs，它将 src 目录下的所有 .ejs 文件编译为 HTML 文件，并输出到 dist 目录下。
我们可以在命令行中执行以下命令，运行这个 gulp 任务： gulp ejs。
gulp-ejs 的配置
虽然 gulp-ejs 的默认配置可以满足大多数需求，但你可能需要针对你的项目进行一些配置。下面是一些可配置的选项：
delimiter：指定 ejs 模板的分隔符，默认是<% %>。client：是否将模板编译为客户端代码，默认是false，会将模板编译为函数。locals：模板里可用的本地变量，可以是一个对象或一个函数。compileDebug：是否进行调试编译，默认是false。
你可以通过传递一个对象来配置 gulp-ejs：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
---------------- -- -- -
------ ---------------------
-----------
---------- ----
------- -----
------- -
------ --- ---------
-------- ------- -------
-
---
-------------------------
---上面这个例子中，我们将分隔符改为了 $，将模板编译为客户端代码，设置了本地变量 title 和 message。
示例代码
我们为你准备了一个简单的示例代码，来演示如何使用 gulp-ejs：
-- -------------------- ---- -------
---- ------------- ---
--------- -----
------
------
----- ----------------
---------- ----- ----------
-------
------
------- ------- -------
-------
--------- -------------------- ---- -------
-- -----------
----- ---- - ----------------
----- --- - --------------------
---------------- -- -- -
------ -------------------------
-----------
------- -
------ --- ---------
-------- ------- -------
-
---
-------------------------
---# 命令行 gulp ejs
执行上面的命令后，你将会在 dist 目录下看到编译后的 HTML 文件。
总结
gulp-ejs 是一个非常有用的 npm 包，能够帮助我们更加方便地编译 ejs 模板。通过本文的介绍，你已经知道如何配置和使用 gulp-ejs。使用 gulp-ejs 可以提高你的前端开发效率，让你更加专注于程序的逻辑处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc8bb5cbfe1ea0612800