如何使用 gulp 编译 Mustache 模板部分？

Question

我在 Ruby 下使用 Mustache/Sass/Compass-watch 制作静态 HTML 页面的原型。这个设置非常慢，所以我想用 Gulp 来构建一切。我设法让它构建 Sass，但不能构建 Mustache。它只是在胡子模板中看不到部分内容。我的文件结构是这样的：

.
├── css
├── scss
├── index.html
├── gulpfile.js
└── templates
    ├── index.mustache
    └── partials
        └── header.mustache

其中index.mustache是：

{{> partials/head }}

<body>
    {{> partials/header }}

    <div class="wrap">
        {{> some_inner_partial }}

        <div class="content">
            ...
        </div>
    </div>

    {{> partials/footer }}

</body>
</html>

我的 gulpfile.js 是这样的：

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var mustache = require("gulp-mustache-plus");

// Gulp Sass Task 
gulp.task('sass', function() {
  gulp.src('./scss/{,*/}*.{scss,sass}')
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./css'));
});

// Gulp Mustache Task 
gulp.task('mustache', function() {
    gulp.src("./templates/*.mustache")
        .pipe(mustache({},{},{
            file_1: "partials/*.mustache"
        })).pipe(gulp.dest("./"));
});

gulp.task('default', ['sass', 'mustache'], function () {
    gulp.watch('./scss/{,*/}*.{scss,sass}', ['sass']);
    gulp.watch('./templates/{,*/}*.{mustache}', ['mustache']);
});

因此，当我在控制台中运行

gulp

时，它会很好地构建 scss->css 并监视更改，但对于 Mustache，它会构建 html 标签，但不会构建部分标签，而且它不会监视 Mustache 文件中的更改。

显然小胡子任务有问题。请帮助我理解我在这里缺少什么。我对任务运行器非常陌生，以前从未使用过 Gulp/Grunt。

Answer 1

所以我找到了解决方案。为了让 gulp 观察胡子的变化，我必须将

gulp.watch

更改为

gulp.watch('./templates/**/*.mustache', ['mustache']);

为了使 gulp-mustache-plus 看到部分内容，我需要手动创建一个具有部分名称和路径的对象，并将其作为第三个参数传递给 Mustache 任务。这很奇怪，因为没有人愿意做手工工作，对吧？

无论如何，gulpfile.js 必须如下所示：

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var mustache = require("gulp-mustache-plus");

// Gulp Sass Task 
gulp.task('sass', function() {
  gulp.src('./scss/{,*/}*.{scss,sass}')
    .pipe(sourcemaps.init())
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./css'));
});

// Gulp Mustache Task 
gulp.task('mustache', function() {
    gulp.src("./templates/*.mustache")
        .pipe(mustache({},{},{
            head: "./templates/layout/head.mustache",
            header: "./templates/modules/header.mustache",
            ... etc.... //any oter partials
        })).pipe(gulp.dest("./"));
});

gulp.task('default', ['sass', 'mustache'], function () {
    gulp.watch('./scss/{,*/}*.{scss,sass}', ['sass']);
    gulp.watch('./templates/**/*.mustache', ['mustache']);
});

然后在我的胡子文件中，我必须输入该对象的部分名称：

{{> head }}

<body>
    {{> header }}

    <div class="wrap">
        {{> some_inner_partial }}

        <div class="content">
            ...
        </div>
    </div>

    {{> footer }}

</body>
</html>

现在一切正常。

Answer 2

乍一看，我会说你需要更新你的任务：

gulp.task('mustache', function() {
    gulp
      .src("./templates/**/.mustache")
      .pipe(gulp.dest("./"));
});

修复了吗？

Answer 3

gulp-mustache

自 2015 年起支持从磁盘加载部分内容，因此无需通过部分参数来提供它们。来自文档：

partials 参数中未给出的 Mustache 部分将从磁盘加载，相对于当前正在处理的文件：

{{> ../partials/head }}
这会在当前目录旁边的partials目录中找到一个head.mustache 文件的目录。部分加载是递归的。

这是一个现代的、最小的 gulpfile，它构建和监视从单个入口点文件递归包含的胡子模板和部分内容

index.mustache

。编译好的模板复制到目录

dist

var gulp = require("gulp");
var mustache = require("gulp-mustache");

function build() {
  return gulp
    .src("./templates/index.mustache")
    .pipe(mustache({}))
    .pipe(gulp.dest("./dist"));
}

exports.mustache = build;
exports.default = function () {
  gulp.watch("./templates/**/*.mustache", build);
};

另请注意，

gulp-mustache-plus

是 gulp-mustache

 的已弃用分支，不支持文件加载。

如何使用 gulp 编译 Mustache 模板部分？

问题描述投票：0回答：3

3个回答

最新问题

如何使用 gulp 编译 Mustache 模板部分？

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3