什么是 gulp-mustache-plus？
gulp-mustache-plus 是一个 Gulp 插件，用于在前端开发中处理模板文件。它基于 Mustache 模板引擎，提供了更多的功能和扩展性。
主要特点：
- 支持 Mustache 模板语法
- 支持数据源（JSON 文件、JavaScript 对象、远程 API 等）
- 支持分离 View 和 Data
- 支持假数据（Mock data）
- 支持模板继承
- 支持自定义 Helper 和 Partial
如何使用 gulp-mustache-plus？
安装
使用 npm 安装 gulp-mustache-plus：
npm install gulp-mustache-plus --save-dev
示例
- 编写视图文件（View）
视图文件使用 Mustache 的模板语法，可以和其他模板引擎一样，插入变量和逻辑语句。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
</head>
<body>
<h1>{{title}}</h1>
{{#items}}
<div class="item">{{.}}</div>
{{/items}}
</body>
</html>- 编写数据文件（Data）
数据文件使用 JSON 格式，可以包含视图文件中使用的变量和数据。例如：
{
"title": "Gulp Mustache Plus Demo",
"items": ["item1", "item2", "item3"]
}- 编写 Gulp 任务
Gulp 任务用于将视图文件和数据文件合并成最终的 HTML 文件。需要使用 gulp-mustache-plus 插件。
const gulp = require('gulp');
const mustache = require('gulp-mustache-plus');
gulp.task('mustache', function () {
return gulp.src('views/*.html')
.pipe(mustache({
ext: '.html',
data: function (file) {
return require('./data/' + file.relative + '.json');
}
}))
.pipe(gulp.dest('dist'));
});该任务会将 views 目录下所有 .html 文件作为视图文件，并配合 data 函数将对应 JSON 文件作为数据源，生成最终的 HTML 文件。生成的 HTML 文件会放在 dist 目录下。
更多功能
- 分离 View 和 Data
视图文件和数据文件可以分离，使得维护更加方便。同时，也可以通过参数控制视图文件和数据文件的路径。例如：
const gulp = require('gulp');
const mustache = require('gulp-mustache-plus');
gulp.task('mustache-separate', function () {
return gulp.src('views/**/*.html')
.pipe(mustache({
src: 'views',
ext: '.html',
data: function (file) {
return require('./data/' + file.stem + '.json');
}
}))
.pipe(gulp.dest('dist'));
});- 使用假数据
在开发和测试阶段，可以使用假数据来代替真实数据，方便调试和测试。需要编写假数据文件，假数据文件同样需要遵守 JSON 格式。例如：
{
"items": ["mock-item1", "mock-item2", "mock-item3"]
}需要修改 Gulp 任务，使用假数据文件作为数据源：
const gulp = require('gulp');
const mustache = require('gulp-mustache-plus');
gulp.task('mustache-mock', function () {
return gulp.src('views/*.html')
.pipe(mustache({
ext: '.html',
data: function (file) {
if (process.env.NODE_ENV === 'mock') {
return require('./data/' + file.relative + '.mock.json');
} else {
return require('./data/' + file.relative + '.json');
}
}
}))
.pipe(gulp.dest('dist'));
});在启动任务时，使用环境变量来控制是否启用假数据：
NODE_ENV=mock gulp mustache-mock
- 模板继承
模板继承可以使得视图文件的复用更加方便。需要使用 Partials 和 HasBlock 构建模板继承结构。例如：
base.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
</head>
<body>
{{#content}}
{{> content}}
{{/content}}
</body>
</html>home.html：
{{#> base}}
{{#content}}
<div class="home">{{content}}</div>
{{/content}}
{{/base}}在 Gulp 任务中需要传入 partials 参数：
const gulp = require('gulp');
const mustache = require('gulp-mustache-plus');
gulp.task('mustache-extend', function () {
return gulp.src('views/**/*.html')
.pipe(mustache({
src: 'views',
ext: '.html',
data: function (file) {
return require('./data/' + file.stem + '.json');
},
partials: function (file) {
let p = {};
p['base'] = './views/base.html';
return p;
}
}))
.pipe(gulp.dest('dist'));
});- 自定义 Helper 和 Partial
通过自定义 Helper 和 Partial 可以使得模板语法更加灵活，可以自定义一些特定的功能。例如：
const gulp = require('gulp');
const mustache = require('gulp-mustache-plus');
const fm = require('front-matter');
function md2html(md) {
return marked(md).replace(/<\/?p>/g, '');
}
mustache.addHelper('markdown', function (text) {
let content = '';
try {
content = fm(text).body;
} catch(e) {
content = text;
}
return md2html(content);
});
gulp.task('mustache-helper', function () {
return gulp.src('views/**/*.html')
.pipe(mustache({
src: 'views',
ext: '.html',
data: function (file) {
return require('./data/' + file.stem + '.json');
},
partials: function (file) {
let p = {};
p['base'] = './views/base.html';
return p;
}
}))
.pipe(gulp.dest('dist'));
});该示例中添加了一个 markdown Helper，用于将 markdown 转换为 HTML。需要引入 marked 和 front-matter 两个库，并在 Gulp 任务中使用 addHelper 添加 Helper。
结语
gulp-mustache-plus 是一个很棒的 Gulp 插件，它基于 Mustache 模板引擎，提供了更多的功能和扩展性。在前端开发中，模板通常都是必不可少的，了解 gulp-mustache-plus 的使用方法，能够让我们更加高效地使用模板。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c44