How do I compile mustache templates partials with gulp? -
i make prototypes of static html pages mustache/sass/compass-watch under ruby. setup slow, want move building gulp. managed have build sass, not mustache. doesn't see partials in mustache templates. file structure this:
. ├── css ├── scss ├── index.html ├── gulpfile.js └── templates ├── index.mustache └── partials └── header.mustache where index.mustache is:
{{> partials/head }} <body> {{> partials/header }} <div class="wrap"> {{> some_inner_partial }} <div class="content"> ... </div> </div> {{> partials/footer }} </body> </html> my gulpfile.js goes this:
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']); }); so when run gulp in console builds scss->css fine , watches changes, mustache builds html tags not partials , doesn't watch changes in mustache files.
obviously there's wrong mustache task. please me understand i'm missing here. i'm new task runners, never used gulp/grunt before.
so figured out solution. in order make gulp watch mustache changes had change gulp.watch gulp.watch('./templates/**/*.mustache', ['mustache']); , in order make gulp-mustache-plus see partials need manually create object partial name , path , pass third parameter mustache task. , weired, because no 1 wants manual work, right?
anyway gulpfile.js must this:
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']); }); and in mustache files had put partials names object:
{{> head }} <body> {{> header }} <div class="wrap"> {{> some_inner_partial }} <div class="content"> ... </div> </div> {{> footer }} </body> </html> now works fine.
Comments
Post a Comment