@inlinerjs

Как с помощью gulp собирать html шаблоны из mustache?

Раньше с системами сборки не работал. Верстаю с помощью Sass/Compass-watch/Mustache под Ruby. Надоела очень медленная сборка (более 6 секунд), хочу перейти на сборку gulp'ом. Сборка и вотчер для sass работает нормально, а с мусташем не могу разобраться.

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


Структура файлов такая:
.
├── css
├── scss
├── index.html
├── gulpfile.js
└── templates
    ├── index.mustache
    └── partials
        └── header.mustache


Т.е. templates/index.mustache должен скомпилироваться в index.html

index.mustache:
{{> partials/head }}

<body>
    {{> partials/header }}

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

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

    {{> partials/footer }}

</body>
</html>


В результате в html компилируются только теги, но не паршалсы. И вотчер не работает, т.е. при изменении какого-либо mustache файла ничего не происходит. Собираются только при запуске gulp.

Что нужно исправить в gulpfile.js?

Использую плагин gulp-mustache-plus
Возможно есть какой-то более подходящий плагин для моей задачи?
  • Вопрос задан
  • 1367 просмотров
Решения вопроса 1
Denormalization
@Denormalization
gulp.src("./templates/**/*.mustache")

и

gulp.watch('./templates/**/*.mustache', ['mustache']);
Так пробовал?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы