Come si compilano i modelli dei baffi parziali con gulp?

Realizzo prototipi di pagine HTML statiche con Mustache/Sass/Compass-watch in Ruby. Questa configurazione è MOLTO lenta, quindi voglio passare a costruire tutto con Gulp. Sono riuscito a farlo costruire Sass, ma non Mustache. Semplicemente non vede i partial nei template dei baffi. La mia struttura dei file è come questo:Come si compilano i modelli dei baffi parziali con gulp?

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

dove index.mustache è:

{{> partials/head }} 

<body> 
    {{> partials/header }} 

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

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

    {{> partials/footer }} 

</body> 
</html>

miei gulpfile.js va in questo modo:

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

Così, quando corro gulp in console costruisce scss-> css bene e controlla le modifiche, ma come per i baffi costruisce tag html ma non parziali e inoltre non controlla le modifiche nei file dei baffi.

Ovviamente c'è qualcosa di sbagliato nell'attività di baffi. Per favore aiutami a capire cosa mi manca qui. Sono molto nuovo per i corridori compito, mai usato Gulp/Grunt prima.

fonte

2015-06-19 Andrey

Quindi ho trovato la soluzione. Per fare in modo che il gulp guardi i cambiamenti dei baffi ho dovuto cambiare gulp.watch a gulp.watch('./templates/**/*.mustache', ['mustache']); E per fare gulp-moustache-plus vedere i parziali ho bisogno di creare manualmente un oggetto con nome e percorso parziale e passarlo come terzo parametro compito di baffi. E questo è faticoso, perché nessuno vuole fare un lavoro manuale, giusto?

In ogni caso i gulpfile.js devono apparire così:

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

E poi nei miei file baffi ho dovuto mettere i nomi parziali di tale oggetto:

{{> head }} 

<body> 
    {{> header }} 

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

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

    {{> footer }} 

</body> 
</html>

Ora tutto funziona bene.

fonte

2015-06-19 23:20:11 Andrey

come appare il file 'index.html'? – ayjay

@ayjay, questo è un vecchio argomento, non ho più quei file. – Andrey

A prima vista, direi è necessario aggiornare il vostro compito con:

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

corregge?

fonte

2015-06-19 22:57:55 jbdemonte

No, questo non aiuta. Vedi la mia soluzione che ho appena postato. Grazie comunque. – Andrey

Questo non fa nulla. –

Come si compilano i modelli dei baffi parziali con gulp?

risposta

Problemi correlati