简介
gulp-tpls 是一款方便前端开发的 npm 包，可通过 Gulp 自动化构建工具，实现 HTML 文件模版的整合和压缩，以及 JS/CSS 中的 HTML 模版内联，在前端项目开发和构建流程中提供了快速和方便的模版处理能力。
安装
在项目目录下使用 npm 安装 gulp-tpls 包，并添加到 devDependencies 下：
npm install gulp-tpls --save-dev
配置
在 Gulp 构建流程中，可通过以下代码配置 gulp-tpls：
var gulp = require('gulp');
var tpl2js = require('gulp-tpls');
gulp.task('tpls', function () {
return gulp.src(['./templates/*.html'])
.pipe(tpl2js({ base: 'templates', fileName: 'tpls.js', prefix: 'app.tpl.' }))
.pipe(gulp.dest('./js/'));
});gulp-tpls 提供了三个参数：
base：设置 HTML 模版文件的基础目录，可根据需要调整如./views/templates。fileName：设置生成的 JS 文件名称，如tpls.js。prefix：设置自定义的生成代码名前缀，如示例中的app.tpl.。
使用
在 JavaScript 代码中，使用自动生成的模版代码，例如：
var tpl = app.tpl.header({
title: '首页'
});
$('#header-container').html(tpl);其中 app.tpl.header() 是根据 HTML 文件自动生成的 JavaScript 模版函数名称，函数参数是对象类型，包含传递到 HTML 模版中的变量。
示例
以下是 gulp-tpls 的实际使用示例：
<!-- ./templates/header.html -->
<header class="header">
<h1>{{title}}</h1>
</header>-- -------------------- ---- -------
-- ------
--- --- - ---
-- ------
--------- -- -
--- --- - ----------------
------ ----
---
---------------------------------
------- -------------------- ---- -------
-- -----------
--- ---- - ----------------
--- ------ - ---------------------
----------------- -------- -- -
------ --------------------------------
-------------- ----- ------------ --------- ---------- ------- ---------- ---
--------------------------
---
-------------------- ----------总结
gulp-tpls 提供了快速方便的 HTML 模版处理能力，通过 Gulp 构建流程，可实现 HTML 文件模版的整合和压缩，以及 JS/CSS 中的 HTML 模版内联。使用 gulp-tpls 可以极大地提高前端开发的效率，推荐大家使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572bf81e8991b448e8d77