Wie kompiliere ich Schnipsel Vorlagen Partials mit Schluck?

Ich fertige Prototypen von statischen HTML-Seiten mit Moustache/Sass/Compass-watch unter Ruby. Dieses Setup ist sehr langsam, also möchte ich mit Gulp alles aufbauen. Ich schaffte es, Sass zu bauen, aber nicht Moustache. Teiltabellen in Schnurrbartvorlagen werden nicht angezeigt. Meine Dateistruktur ist wie folgt:Wie kompiliere ich Schnipsel Vorlagen Partials mit Schluck?

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

wo index.mustache ist:

{{> partials/head }} 

<body> 
    {{> partials/header }} 

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

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

    {{> partials/footer }} 

</body> 
</html>

Mein gulpfile.js geht so:

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

Also, wenn ich gulp in der Konsole laufen es baut scss-> css ganz gut und passt auf Änderungen auf, aber wie für den Schnurrbart baut er HTML-Tags, aber keine Partials und auch nicht für Änderungen in Schnurrbart-Dateien.

Offensichtlich stimmt etwas mit der Schnurrbartaufgabe nicht. Bitte hilf mir zu verstehen, was mir hier fehlt. Ich bin sehr neu bei Aufgabenläufern, habe noch nie Gulp/Grunt benutzt.

Quelle

2015-06-19 Andrey

Also habe ich die Lösung gefunden. Um Schluckuhr für Schnurrbartänderungen zu sehen, musste ich gulp.watch zu ändern Und um Schluck-Schnurrbart-plus die Partials zu sehen, muss ich ein Objekt mit Teilname und Pfad manuell erstellen und es als einen dritten Parameter übergeben zur Schnurrbartaufgabe. Und das ist gewagt, denn niemand will eine Handarbeit machen, oder?

Wie auch immer die gulpfile.js muss wie folgt aussehen:

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

Und dann in meinem Schnurrbart Dateien hatte ich von diesem Objekt partials Namen zu setzen:

{{> head }} 

<body> 
    {{> header }} 

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

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

    {{> footer }} 

</body> 
</html>

Jetzt funktioniert alles einwandfrei.

Quelle

2015-06-19 23:20:11 Andrey

Wie sieht Ihre Datei 'index.html' aus? – ayjay

@ayjay, das ist ein altes Thema, ich habe diese Dateien nicht mehr. – Andrey

Auf den ersten Blick würde ich sagen, dass Sie Ihre Aufgabe mit aktualisieren müssen:

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

fix ist das?

Quelle

2015-06-19 22:57:55 jbdemonte

Nein, das hilft nicht. Sehen Sie meine eigene Lösung, die ich gerade gepostet habe. Danke trotzdem. – Andrey

Das macht gar nichts. –

Wie kompiliere ich Schnipsel Vorlagen Partials mit Schluck?

Antwort

Verwandte Themen