使用express-hbs预编译静态页面

时间:2015-09-28 16:53:47

标签: node.js express gulp handlebars.js

我正在尝试使用express-hbs在gulp任务中预编译一些静态HTML(包含布局和部分),作为“发布此库”任务的一部分。我有一些看起来像

的东西
gulp.task 'compile', ->
  gulp.src './www/views/*.html'
    .pipe through.obj (file, enc, cb) ->
      //the missing part
    .pipe gulp.dest './temp'

我知道我可以调用hbs编译来编译单个文件,但不包括任何部分或布局。

template = hbs.compile(file.contents.toString());
file.contents = new Buffer(template(data));
this.push(file);
cb();

我知道我只是缺少一些简单的东西,在这里查看express-hbs的来源我应该能够通过调用hbs.express4函数获取“render”函数的副本并传入我的所有选项但是我不确定我需要传递给渲染函数以使它做正确的事情。

我想使用express.hbs插件,因为我们正在使用它添加到contentFor等句柄的一些助手。

更新,解决方案:

gulp.task 'compile', ->
  gulp.src './www/views/*.html'
    .pipe through.obj (file, enc, cb) ->
      render = hbs.create().express3
        viewsDir: __base + 'views'
        partialsDir: __base + 'views/partials'
        layoutDir: __base + 'views/layouts'
        defaultLayout: __base + 'views/layouts/layout.html'
        extName: 'html'

      locals = {
        settings: {
          views: __base + 'views'
        }
      }

      self = this;
      render file.path, locals, (err, html) ->
        if(!err)
          file.contents = new Buffer(html);
          self.push(file);
          cb();
        else
          console.log "failed to render #{file.path}"
    .pipe gulp.dest './temp'

1 个答案:

答案 0 :(得分:0)

这是一个名为nonExpress的express-hbs repo中的一个测试,它看起来像你想做的类似。

https://github.com/barc/express-hbs/blob/master/test/nonExpress.js