使用Gulp基于Handlebars模板编译部分和降价

Question

使用Gulp基于Handlebars模板编译部分和降价

Cas*_*ams 6 javascript markdown handlebars.js gulp gulp-compile-handlebars

我这里有一个Handlebars模板tpage.hbs:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title</title>
  {{> head}}
</head>
<body>
  {{> home-header}}
  {{{ mdcontents }}}
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

head并且home-header是偏僻的.

我有一个Markdown文件夹,我想基于这个模板制作HTML页面,在模板中的位置添加.md文件mdcontents.

我有以下Gulpfile:

var gulp = require('gulp');

var handlebars = require('gulp-compile-handlebars');
var HB = require('Handlebars'); // I know I don't need two Handlebars imports, I'm just trying different things at this point
var uglify = require('gulp-uglify');
var markdown = require('gulp-markdown');
var tap = require('gulp-tap');

// ...

gulp.task('markhb', function() {
  return gulp.src('./app/templates/tpage.hbs')
    .pipe(handlebars({}, {
      ignorePartials: false,
      batch: ['./app/templates/partials'] /* my partials directory */
    }))
    .pipe(tap(function(file) {
      var template = HB.compile(file.contents.toString());
      console.log(file.contents.toString());

      return gulp.src('./app/content/mdpages/**.md')
        .pipe(markdown())
        .pipe(tap(function(file) {
          var data = {
            mdcontents: file.contents.toString()
          };

          var html = template(data);

          file.contents = new Buffer(html, 'utf-8'); // Buffer() is deprecated, I'll fix that later
        }))
        .pipe(rename({
          extname: '.html'
        }))
        .pipe(gulp.dest('build/pages'));
    }));
});

Run Code Online (Sandbox Code Playgroud)

所以,我的问题是,如果我保持第一次pipe调用,它会加载部分就好了,但它会忽略并mdcontents完全剥离.但是,如果我删除第一个pipe调用,它会使markdown很好,但剥离部分.我不喜欢我现在正在使用两个Handlebars库,但此时我只想在清理之前使用一个工作模板.我需要添加,删除或更改以获取部分和降价以进行渲染？

Answer 1

Gra*_*ath 0

使用像这样的 Handlebars markdown 中间件https://github.com/helpers/helper-markdown。

然后，我们的想法是使用 Handlebars 和 helper-markdown 作为过滤器来包含文件，而不是让 gulp 为您进行处理。

归档时间：	7 年，2 月前
查看次数：	420 次
最近记录：	7 年，1 月前