Geek Answers Handbook

How to compile parts of mustache patterns with gulp?

I am making prototypes of static HTML pages with Mustache / Sass / Compass-watch under Ruby. This setup is very slow, so I want to move on to creating everything with Gulp. I managed to create Sassa, but not Mustache. He simply does not see partial mustache patterns. My file structure is as follows:

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

where index.mustache:

 {{> partials/head }} <body> {{> partials/header }} <div class="wrap"> {{> some_inner_partial }} <div class="content"> ... </div> </div> {{> partials/footer }} </body> </html>

My gulpfile.js looks like 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']); });

Therefore, when I run gulp in the console, it builds scss-> css just fine and monitors the changes, but as for the mustache, it builds html tags, but not partial ones, and also does not track changes in the mustache files.

Obviously, something is wrong with the mustache task. Please help me understand what I'm missing here. I am very new to runner tasks, have never used Gulp / Grunt before.

+5
source share
2 answers

So, I understood the solution. To make gulp look at mustache changes, I had to change gulp.watch to gulp.watch('./templates/**/*.mustache', ['mustache']); And to make gulp-mustache-plus, see Partial, I need to manually create an object with a partial name and path and pass it as the third parameter for the mustache task. And this is due to the fact that no one wants to do manual work, right?

In any case, gulpfile.js should look like 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 then in my mustache files I had to put the partition names from this object:

 {{> head }} <body> {{> header }} <div class="wrap"> {{> some_inner_partial }} <div class="content"> ... </div> </div> {{> footer }} </body> </html>

Now everything is working fine.

+6
source

First, I would say that you need to update your task:

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

Is this a fix?

0
source

More articles:


All Articles