javascript - 如何将 gulp frontmatters 输出传递给 Gulp 中的另一个插件？

Question

我想将 gulp frontmatters 输出传递给我在 Gulp(gulp 模板)中使用的另一个函数。我想我的语法是正确的，但一定是做错了什么，因为它不起作用。

我使用的 gulp 插件是:Gulp frontmatter和 Gulp template .我正在尝试将一个名为 page 的对象从 frontmatter() 传递到 template() ，如下所示:

.pipe(frontMatter({
  property: 'page' // the name of the property added to the file object
}))
.pipe(template(page)) // passing the page object to the template plugin here

这是行不通的。我做错了什么？

---

供引用:这是我的 gulpfile.js 中的全部代码

// Gulp modules
var gulp        = require( 'gulp' );
var markdown    = require( 'gulp-markdown' );
var frontMatter = require( 'gulp-front-matter' );
var template    = require( 'gulp-template' );

gulp.task('default', function () {
  return gulp.src( ['./**/*.{md,markdown}'] )
    .pipe(frontMatter({
      property: 'page' // property added to file object
    }))
    .pipe(template(page))
    .pipe(markdown())
    .pipe(gulp.dest(grOutput));
});

这是我正在使用的模板 (test/test.md):

---
name: MyName
---
Text
<%= page.name %>
Text

这是我收到的错误消息:

[gulp] Using gulpfile D:\Dropbox\Github\graphene\gulpfile.js
[gulp] Starting 'default'...
[gulp] 'default' errored after 7.49 ms page is not defined

D:\Dropbox\Github\graphene\node_modules\gulp-front-matter\node_modules\event-stream\node_modules\map-stream\index.js:103
        throw err
              ^
expected '<document start>', but found <block mapping end>
  in "undefined", line 12, column 1
    at ParserError.YAMLError (D:\Dropbox\Github\graphene\node_modules\gulp-front-matter\node_modules\front-matter\node_modules\yaml-js\lib\errors.js:72:46)
    at ParserError.MarkedYAMLError (D:\Dropbox\Github\graphene\node_modules\gulp-front-matter\node_modules\front-matter\node_modules\yaml-js\lib\errors.js:88:45)
    at new ParserError (D:\Dropbox\Github\graphene\node_modules\gulp-front-matter\node_modules\front-matter\node_modules\yaml-js\lib\parser.js:17:48)
    at Constructor.Parser.Parser.parse_document_start (D:\Dropbox\Github\graphene\node_modules\gulp-front-matter\node_modules\front-matter\node_modules\yaml-js\lib\parser.js:158:17)
    at Constructor.Parser.Parser.check_event (D:\Dropbox\Github\graphene\node_modules\gulp-front-matter\node_modules\front-matter\node_modules\yaml-js\lib\parser.js:63:48)
    at Constructor.Composer.Composer.get_single_node (D:\Dropbox\Github\graphene\node_modules\gulp-front-matter\node_modules\front-matter\node_modules\yaml-js\lib\composer.js:55:17)
    at Constructor.BaseConstructor.BaseConstructor.get_single_data (D:\Dropbox\Github\graphene\node_modules\gulp-front-matter\node_modules\front-matter\node_modules\yaml-js\lib\constructor.js:78:19)
    at load (D:\Dropbox\Github\graphene\node_modules\gulp-front-matter\node_modules\front-matter\node_modules\yaml-js\lib\yaml.js:113:19)
    at parse (D:\Dropbox\Github\graphene\node_modules\gulp-front-matter\node_modules\front-matter\index.js:26:27)
    at extractor (D:\Dropbox\Github\graphene\node_modules\gulp-front-matter\node_modules\front-matter\index.js:19:34)

Answer 1

您从未定义过 page.. 所以您得到:

[gulp] 'default' errored after 7.49 ms page is not defined

gulp-front-matter 插件将 front matter 添加到文件对象的属性中，gulp 通过 pipe 方法传递。因此，如果您想对前端做一些事情，您需要使用另一个可以使用该属性的插件。否则只需将 remove: true 选项添加到 front matter options hash。

从那里你应该可以调用 template() (没有选项)，我不确定，但也许 page 属性可以从你的模板..

编辑

当 gulp 发送数据时，grunt-template 插件不会从包含我们数据的文件对象中获取任何数据。我的解决方案是直接使用 lodash 模板，并以这种方式传递 chunk 和 frontmatter 数据。

var gulp = require('gulp');
var markdown = require('gulp-markdown');
var frontMatter = require('gulp-front-matter');
var through = require('through2');
var template = require('lodash').template;

gulp.task('default', function () {
  return gulp.src('./template.md')
    .pipe(frontMatter({ // optional configuration
      property: 'page'
    }))
    .pipe(through.obj(function (file, enc, callback) {
      if (file.isBuffer()) {
        file.contents = new Buffer(template(file.contents, file.page));
      }

      this.push(file);
      return callback();
    }))
    .pipe(markdown())
    .pipe(gulp.dest('dist'));
});