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-＆gt; css就好了并监视更改，但是对于小胡子来说，它构建了html标签但不是部分，并且它也没有注意到更改在胡子文件中。

胡须任务显然有问题。请帮助我理解我在这里失踪的东西。我对任务选手来说都很陌生，以前从未使用过Gulp / Grunt。

Answer 1

所以我找到了解决方案。为了让看到小胡子的变化，我不得不将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("./"));
});

它能解决吗？

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

2 个答案: