简介
gulp-tpls 是一款方便前端开发的 npm 包，可通过 Gulp 自动化构建工具，实现 HTML 文件模版的整合和压缩，以及 JS/CSS 中的 HTML 模版内联，在前端项目开发和构建流程中提供了快速和方便的模版处理能力。
安装
在项目目录下使用 npm 安装 gulp-tpls 包，并添加到 devDependencies 下：
--- ------- --------- ----------
配置
在 Gulp 构建流程中，可通过以下代码配置 gulp-tpls：
--- ---- - ----------------
--- ------ - ---------------------
----------------- -------- -- -
------ --------------------------------
-------------- ----- ------------ --------- ---------- ------- ---------- ---
--------------------------
---gulp-tpls 提供了三个参数：
base：设置 HTML 模版文件的基础目录，可根据需要调整如./views/templates。fileName：设置生成的 JS 文件名称，如tpls.js。prefix：设置自定义的生成代码名前缀，如示例中的app.tpl.。
使用
在 JavaScript 代码中，使用自动生成的模版代码，例如：
--- --- - ----------------
------ ----
---
---------------------------------其中 app.tpl.header() 是根据 HTML 文件自动生成的 JavaScript 模版函数名称，函数参数是对象类型，包含传递到 HTML 模版中的变量。
示例
以下是 gulp-tpls 的实际使用示例：
---- ----------------------- ---
------- ---------------
------------------
----------- ------
--- --- - ---
-- ------
--------- -- -
--- --- - ----------------
------ ----
---
---------------------------------
------- -----------
--- ---- - ----------------
--- ------ - ---------------------
----------------- -------- -- -
------ --------------------------------
-------------- ----- ------------ --------- ---------- ------- ---------- ---
--------------------------
---
-------------------- ----------总结
gulp-tpls 提供了快速方便的 HTML 模版处理能力，通过 Gulp 构建流程，可实现 HTML 文件模版的整合和压缩，以及 JS/CSS 中的 HTML 模版内联。使用 gulp-tpls 可以极大地提高前端开发的效率，推荐大家使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600572bf81e8991b448e8d77