node-hbsfy 不使用 Gulp 编译模板

Question

我只是尝试通过浏览器化和 Gulp 编译 hbs 模板，但是一旦从我的 hbs 文件中遇到任何 HTML 标记，编译过程就会失败。

我已经通过删除 hbs 文件中的 HTML 代码来确认这一点，此时 Browserify 按预期运行。

这是我的 Gulp 任务的简化版本：

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

HBS 模板：

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

主 JS 文件：

(function (){
  const _handlebars = require('hbsfy/runtime');
  function init () {
    _handlebars.registerPartial('menu', require('components/menu.hbs'));
  }
  document.addEventListener('DOMContentLoaded', init);
})();

可能出现什么问题？就好像 hbsfy 转换没有正常运行......

Answer 1

似乎这个问题实际上是由重新映射插件引起的。编译按预期使用路径修改工作。

这是我更新的 Gulp 文件：

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