node-hbsfy nicht kompilieren Vorlagen mit Gulp

Question

Ich versuche einfach, HTML-Vorlagen über Browserify und Gulp zu kompilieren, aber der Kompilierungsprozess schlägt fehl, sobald HTML-Markup aus meiner hbs-Datei angetroffen wird.

Ich habe das bestätigt, indem ich den HTML-Code in der hbs-Datei entfernt habe, zu diesem Zeitpunkt läuft Browserify wie erwartet. Hier

ist eine vereinfachte Version meiner Gulp Aufgabe:

const _gulp = require('gulp'); 
const _browserify = require('browserify'); 
const _remapify = require('remapify'); 
const _hbsfy = require('hbsfy'); 
const _vinylSourceStream = require('vinyl-source-stream'); 
const _vinylBuffer = require('vinyl-buffer'); 

_gulp.task('js:dev',() => { 
    return _browserify({entries: './src/js/app.js', debug: true}) 
    .plugin(_remapify, [ 
     { 
     src: '**/*.hbs', // glob for the files to remap 
     cwd: './src/markup/components', 
     expose: 'components' // this will expose './src/markup/components' as 'components' 
     } 
    ]) 
    .transform(_hbsfy) 
    .bundle() 
    .pipe(_vinylSourceStream('app.js')) 
    .pipe(_vinylBuffer()) 
    .pipe(_gulp.dest('dist')) 
}); 

Die hbs Vorlage:

<div class="menu"> </div> 

Die Haupt JS-Datei:

(function(){ 
    const _handlebars = require('hbsfy/runtime'); 

    function init() { 
    _handlebars.registerPartial('menu', require('components/menu.hbs')); 
    } 

    document.addEventListener('DOMContentLoaded', init); 
})(); 

Was schief gehen könnte? Es ist, als würde die hbsfy-Umwandlung nicht richtig ausgeführt ...

Answer 1

Es scheint, dass dieses Problem tatsächlich durch das remapify Plugin verursacht wird. Die Kompilierung funktioniert wie erwartet unter Verwendung von pathmodify.

Hier ist meine aktualisierte Gulp-Datei:

const _gulp = require('gulp'); 
const _browserify = require('browserify'); 
const _pathmodify = require('pathmodify'); 
const _hbsfy = require('hbsfy'); 
const _vinylSourceStream = require('vinyl-source-stream'); 
const _vinylBuffer = require('vinyl-buffer'); 

_gulp.task('js:dev',() => { 
    return _browserify({entries: './src/js/app.js', debug: true}) 
    .plugin(_pathmodify, { 
     mods: [ 
     _pathmodify.mod.dir('components', process.cwd() + '/src/markup/partials/components') 
     ] 
    }) 
    .transform(_hbsfy) 
    .bundle() 
    .pipe(_vinylSourceStream('app.js')) 
    .pipe(_vinylBuffer()) 
    .pipe(_gulp.dest('dist')) 
});