2017-03-16 3 views
1

Ich habe die folgende Verzeichnisstruktur in meinem repos:Gulp: Zwischendateien vermeiden, wenn Schnurrbart Kompilieren

src 
    some-project 
    some-file.html 
    some-file.yml 
    other-project 
    foo.html 
    foo.yml 
    bar.html 
    bar.yml 
    stylesheet.css 

dist 
    some-project 
    some-file.html 
    some-file.yml 
    other-project 
    foo.html 
    foo.yml 
    bar.html 
    bar.yml 

ich einen Schluck Aufgabe haben, der die Stile in jedem Sheet durch eine HTML-Datei im Verzeichnis/src Ordner hinzugefügt nimmt und fügt sie automatisch in das HTML ein (das sind E-Mails). Die Yml sind Metainformationen, die beim Senden von Daten verwendet werden.

Jetzt möchte ich meinem HTML HTML-Schnurrbart-Templating hinzufügen. Die Daten für die Vorlagen werden in den XML-Dateien gespeichert. Das Problem, das ich habe, ist, dass das Gulp-Mustache-Plugin einen Stream für seine Vorlageneingabe und ein Objekt im Parameter für seine Daten verwendet.

gulp.task('build',() => { 
    gulp.src('src/**/*.html') 
    .pipe(mustache(data)) // I don't have the data! 
    .pipe(inlineCss({ 
     removeStyleTags: false 
    })) 
    .pipe(prefix(BASE_URL, [ { match: "img[src]", attr: "src"} ])) 
    .pipe(gulp.dest('dist')) 
}); 

Ich habe eine andere Aufgabe, die YML zu JSON kompilieren kann, aber ich habe versucht, temporäre Dateien zu vermeiden, zu schaffen, da sie den ganzen Punkt besiegt schlucks virtuelle Dateiströme zu haben. Außerdem löst es nicht das Problem, dass ich zwei Aufgaben und zwei Schluck-Pipes habe, ich kann den Inhalt einer Datei nicht an die Schnurrbart-Funktion übergeben. Gibt es etwas, das mir fehlt?

Es scheint wie eine sehr einfache Aufgabe, und ich habe stundenlang ohne jeden Fortschritt gesucht. Gibt es keine Möglichkeit, Dateien pro Paar zu lesen?

Antwort

1

Ok, als erstes merke ich, dass du nichts in deiner Gulp Aufgabe zurückgibst, was verhindert, dass Gulp weiß, wann deine Aufgabe beendet ist.

Da die Aufgabe selbst ist asynchron und Gulp unterstützt Aufgaben returning a Promise, die den Abschluss signalisieren wird, wenn er beschließt, Sie so etwas tun könnte, mit node-yaml Paket, das auch ein Versprechen zurück:

const yaml = require('node-yaml') 

gulp.task('build',() => { 
    return yaml.read('my-data.yml').then(data => 
    new Promise(resolve => { 
     gulp.src('src/**/*.html') 
     .pipe(mustache(data)) 
     // ... 
     .pipe(gulp.dest('dist')) 
     .on('end', resolve) 
    }); 
); 
}); 

Oder einfach callbacks mit :

gulp.task('build', callback => { 
    return yaml.read('my-data.yml', data => { 
    gulp.src('src/**/*.html') 
     .pipe(mustache(data)) 
     // ... 
     .pipe(gulp.dest('dist')) 
     .on('end', callback) 
    }); 
}); 
+0

Danke, ich werde das morgen ausprobieren, aber es macht sehr viel Sinn. Ich bin nicht neu in JS, aber ich bin neu im Umgang mit Knoten. –

+0

Ah, das wird nicht genau so wie es ist. Es ist ein Schub in die richtige Richtung, denke ich, aber ich muss die richtige Yaml in der richtigen HTML-Pipeline. –

+0

@JacqueGoupil Ich sehe! Dies könnte in der Tat ein bisschen schwieriger sein. Also hast du 1 Yaml-Datei für 1 Schnurrbartvorlage? Ich lade Sie ein, eine separate Frage zu öffnen, in der Sie das Schema detaillierter beschreiben. Auch wenn wir oft so viel wie möglich alleine machen wollen, denken Sie daran, vorsichtig mit dem [XY-Problem] umzugehen (https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). – lleaff

Verwandte Themen