如何使用 gulp 编译小胡子模板部分？

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 就好了并且观察变化，但是至于小胡子它构建 html 标签但不是部分标签，它也不会监视小胡子文件中的更改。

显然小胡子任务有问题。请帮助我了解我在这里缺少的东西。我是运行任务的新手，以前从未使用过 Gulp/Grunt。

Answer 1

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

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

修复了吗？

Answer 2

所以我想出了解决办法。为了 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>

现在一切正常。

如何使用 gulp 编译小胡子模板部分？

How do I compile mustache templates partials with gulp?

mustache

gulp