Question

我只是尝试通过Browserify和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

看来这个问题实际上是由remapify插件引起的。编译按预期使用pathmodify代替。

这是我更新的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'))
});

node-hbsfy没有使用Gulp编译模板

1 个答案: