Question

我正在尝试使用browserify正确编译hbsfy或browserify-handlebars的任何变体。编译结果输出到我的浏览器的handlebars.js（hbsfy）代码。我尝试过使用browserify命令browserify -t hbsfy app.js > bundle.js，但它没有改变任何内容

我没有发布图片的声誉，但基本上这是输出：

var templater = require（＆＃34; handlebars / runtime＆＃34;）。default.template; module.exports = templater（function（Handlebars，depth0，helpers，partials，data）{this.compilerInfo = [4，＆＃39;＆gt; = 1.0.0＆＃39;]; helpers = this.merge（helpers，Handlebars.helpers）; data = data || {}; var buffer =＆＃34;＆＃34;，stack1， helper，functionType =＆＃34; function＆＃34;，escapeExpression = this.escapeExpression; buffer + =＆＃34; 你好＆＃34 ;; if（helper = helpers.name）{stack1 = helper.call（depth0，{hash：{}，data：data}）; } else {helper =（depth0＆amp;＆amp; depth0.name）; stack1 = typeof helper === functionType？ helper.call（depth0，{hash：{}，data：data}）：helper; } buffer + = escapeExpression（stack1）+＆＃34; ＆＃34 ;;返回缓冲区; }）;

我的模板（template.hbs）只是<h1>Hello {{name}}</h1>

我的gulpfile设置：

var gulp = require('gulp');
var livereload = require('gulp-livereload');
var browserify = require('gulp-browserify');
var hbsfy = require('browserify-handlebars');
//var hbsfy = require('hbsfy'); //this one shows up the same way

gulp.task('scripts', function() {
        return gulp.src('./app/app.js')
        .pipe(browserify({
            transform: [hbsfy]
        }))
        .pipe(rename('bundle.js'))
        .pipe(gulp.dest('./build/js'))
        .pipe(connect.reload());
});

和我的js文件：

var Handlebars  = require('hbsfy/runtime');
var $           = require('jquery'),
 router         = require('./router/routerDefault'),
 template       = require('./template.hbs');

$(document).ready(function(){
    document.body.innerHTML = template({name: 'browserify'});
})

有没有人有如何处理这个的经验？任何建议都是有益的！

Answer 1

此问题的原因是冗余编译。我相信，在packages.json和gulpfile.js中列出一个转换将执行两次。在我的packages.json中，我现在只使用这个'node'：

"browserify": {
    "transform": [
      "hbsfy"
    ]
  },

这将为您编译模板。您的gulpfile.js不需要此部分：

.pipe(browserify({
            transform: [hbsfy]
        }))

您可以使用其中任何一个。我的脚本gulp任务现在看起来像这样：

gulp.task('scripts', function() {
        return browserify('./app/app.js')
                .bundle()
                .pipe(source('bundle.js'))
                .pipe(gulp.dest('./build/js'))
                .pipe(connect.reload());
});

Answer 2

我正在经历类似的事情。

好奇，您使用的操作系统是什么？似乎影响Mac，但Windows似乎没问题。

我不完全确定导致这种情况的原因，但我已停止使用gulp-browserify，因为它现在已被列入黑名单。

我遵循了此博客文章中的建议，似乎解决了这个问题：http://viget.com/extend/gulp-browserify-starter-faq

最后一点是最相关的。

编辑：

在使用gulp-browserify时，我还会检查你是否在package.json中列出了你的转换。我想你可能只需要在一个地方指定转换（在你现在或在package.json中的gulpfile中）。

hbsfy在编译时输出hbsfy代码 - 使用Gulp + Browserify

2 个答案: