compile - ¿Cómo compilo parciales de plantillas de bigote con gulp?
install gulp windows (2)
Realizo prototipos de páginas HTML estáticas con Mustache / Sass / Compass-watch bajo Ruby. Esta configuración es MUY lenta, así que quiero pasar a compilar todo con Gulp. Logré que compilara Sass, pero no Moustache. Simplemente no ve parciales en las plantillas de bigote. Mi estructura de archivos es así:
.
├── css
├── scss
├── index.html
├── gulpfile.js
└── templates
├── index.mustache
└── partials
└── header.mustache
donde index.mustache es:
{{> partials/head }}
<body>
{{> partials/header }}
<div class="wrap">
{{> some_inner_partial }}
<div class="content">
...
</div>
</div>
{{> partials/footer }}
</body>
</html>
Mi gulpfile.js es como sigue:
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'']);
});
Entonces, cuando ejecuto gulp en la consola, construye scss-> css bien y busca cambios, pero en cuanto a bigote construye etiquetas html pero no parciales y tampoco observa los cambios en los archivos de bigote.
Obviamente hay algo mal con la tarea del bigote. Por favor, ayúdame a entender lo que me falta aquí. Soy muy nuevo en los corredores de tareas, nunca antes había usado Gulp / Grunt.
A primera vista, diría que necesita actualizar su tarea con:
gulp.task(''mustache'', function() {
gulp
.src("./templates/**/.mustache")
.pipe(gulp.dest("./"));
});
¿Lo arregla?
Así que descubrí la solución. Para hacer que Gulp mire los cambios de bigote, tuve que cambiar gulp.watch por gulp.watch(''./templates/**/*.mustache'', [''mustache'']); Y para hacer que gulp-bigote-plus vea los parciales necesito crear manualmente un objeto con nombre y ruta parcial y pasarlo como un tercer parámetro a la tarea del bigote. Y eso es todo, porque nadie quiere hacer un trabajo manual, ¿verdad?
De todos modos, el archivo gulpfile.js debe verse así:
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'']);
});
Y luego en mis archivos de bigote tuve que poner nombres de parciales de ese objeto:
{{> head }}
<body>
{{> header }}
<div class="wrap">
{{> some_inner_partial }}
<div class="content">
...
</div>
</div>
{{> footer }}
</body>
</html>
Ahora todo funciona bien