如何使用gulp编译胡须模板片段？_Gulp_Mustache

如何使用gulp编译胡须模板片段？

gulp

如何使用gulp编译胡须模板片段？,gulp,mustache,Gulp,Mustache,我在Ruby下制作了带有mustach/Sass/Compass-watch的静态HTML页面原型。这个设置非常慢，所以我想用Gulp构建所有东西。我设法让它长出了时髦的样子，但没留胡子。它只是在小胡子模板中看不到片段。我的文件结构如下： . ├── css ├── scss ├── index.html ├── gulpfile.js └── templates ├── index.mustache └── partials └── header.mustac

我在Ruby下制作了带有mustach/Sass/Compass-watch的静态HTML页面原型。这个设置非常慢，所以我想用Gulp构建所有东西。我设法让它长出了时髦的样子，但没留胡子。它只是在小胡子模板中看不到片段。我的文件结构如下：

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

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']);
});

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']);
});

其中index.mustache为：

{{> partials/head }}

<body>
    {{> partials/header }}

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

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

    {{> partials/footer }}

</body>
</html>

所以，当我在控制台中运行

gulp

时，它会很好地构建scs->css，并监视更改，但对于mustach，它会构建html标记，但不会构建片段，也不会监视mustach文件中的更改

显然，留胡子任务有问题。请帮助我理解我在这里遗漏了什么。我对任务执行者非常陌生，以前从未使用过吞咽/咕噜。

乍一看，我想说你需要用以下内容更新你的任务：

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

它修好了吗？

所以我想出了解决办法。为了让gulp watch查看胡子的变化，我必须将

gulp.watch

更改为

gulp.watch（'./templates/***.mustache'，['mustache']）
为了让gulp mustache plus看到部分，我需要手动创建一个具有部分名称和路径的对象，并将其作为第三个参数传递给mustache任务。这很奇怪，因为没人愿意做手工工作，对吧
无论如何，gulpfile.js必须如下所示：
.
├── css
├── scss
├── index.html
├── gulpfile.js
└── templates
    ├── index.mustache
    └── partials
        └── header.mustache

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']);
});

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>

{{>head}
{{>头}
{{>某些内部部分}
...
{{>页脚}

现在一切正常。
不，那没用。请参阅我刚刚发布的自己的解决方案。无论如何，谢谢。这根本没用。你的index.html
文件是什么样子的？@ayjay，这是个老话题，我已经没有这些文件了。