Comment concaténer l'en-tête, le pied de page et la liste des fichiers de contenu dans Gulp?

Question

Je crée un générateur html avec un fichier d'en-tête, un fichier de pied de page et une liste de fichiers de contenu. J'ai des partiels de structure de dossier/contenu. Le dossier Partials Inside est l'en-tête et le pied de page, et dans les partials/contents sont des fichiers comme index.html, about-us.html, etc. Dans ces fichiers de contenu, je veux ajouter l'en-tête et le pied de page. Donc, fondamentalement, je veux concaténer des fichiers en faisant une boucle dans le dossier du contenu comme mon contenu, et ajouter des fichiers d'en-tête/pied de page, puis la sortie dans le dossier différent. Comment puis-je y parvenir? Ou vous pouvez suggérer une structure de dossier pour y parvenir facilement.

Ici, ce que j'ai est une tâche engouffreur pour seul fichier dans le dossier contenu:

gulp.task('html-test', ['clean-html-test'], function() { 
 
    var header = './partials/header.html'; 
 
    var body = './partials/contents/_test.html'; 
 
    var footer = './partials/footer.html'; 
 
    var outputFilename = 'test.html'; 
 

 
    log('Generating public/test.html...'); 
 

 
    return gulp.src([header, body, footer]) 
 
    .pipe($.concat(outputFilename)) 
 
    .pipe(gulp.dest('./public/')); 
 
});

Alors, comment puis-je automatiser le processus en boucle dans le dossier de contenu? Merci.

Answer 1

Trouvé une solution, un plugin de boucher appelé gulp-headerfooter. Juste testé et ça a marché!

gulp.task('html-gen', function() { 
 
    log('Generating html files...'); 
 
    gulp.src('./partials/content/*.html') 
 
    .pipe($.headerfooter.header('./partials/_header.html')) 
 
    .pipe($.headerfooter.footer('./partials/_footer.html')) 
 
    .pipe(gulp.dest('./public/')); 
 
});