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

时间：2014-05-20 15:04:24

标签： javascript node.js gulp lodash

我想将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)

6 个答案:

答案 0 :(得分：2)

你从未定义page ..所以你得到：

  

[gulp]'默认'在7.49 ms页面未定义后出错

gulp-front-matter插件将前端内容添加到文件对象上的属性中，gulp通过pipe方法传递该属性。所以你需要使用另一个可以使用该属性的插件，如果你想对前面的事情做些什么的话。否则，只需将remove: true选项添加到前端选项哈希。

从那里你应该可以只调用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'));
});

答案 1 :(得分：2)

看起来gulp-template设置为侦听名为＆＃34; file.data＆＃34;的文件对象上的属性。在这种情况下，使用gulp-data插件https://www.npmjs.org/package/gulp-data很容易实现。 README中有一个关于如何传递frontmatter的例子。

答案 2 :(得分：0)

因此，不幸的是，这个问题的答案都没有对我有用。我使用gulp-vartree得到了相当远的距离，它可以在变量中存储属性，这就是我想要做的事情。

最后，我遇到了新的问题，所以我最终切换到grunt stencil，因为它完全符合我的要求而没有任何麻烦。

答案 3 :(得分：0)

在寻找这个问题的解决方案并找不到任何东西后，我自己构建了一个（新的gulp用户，所以如果这是一个可怕的解决方案，我很抱歉，但至少它是这样的）：

var fs     = require('fs');
var gulp   = require('gulp');
var gutil  = require('gulp-util');
var tap    = require('gulp-tap');
var header = require('gulp-header');
var footer = require('gulp-footer');
var concat = require('gulp-concat');
var fm     = require('gulp-front-matter');
var marked = require('gulp-markdown');

// Build a single index.html from a glob of markdown files, specifically for use with impressjs.
gulp.task('build:index', function (callback) {

  // Parse a glob of markdown files.
  gulp.src(src + '/markup/**/*.md')

    // Strip the frontmatter - it gets shoved into file.fm['...']
    .pipe(fm ({property: 'fm', remove: true}))

    // Expose file.fm['..'] variables generated by gulp-front-matter using gulp-tap.
    // Because we don't want to write empty tags if the values aren't defined, we
    // set default variables that initialize the entire tag attribute.
    .pipe(tap(function(file, t) {
      slide_id = file.fm['id']==undefined ? '' : 'id="' + file.fm['id'] + '"'
      slide_class = file.fm['class']==undefined ? '' : 'class="' + file.fm['class'] + '"'
      slide_properties  = file.fm['properties']
    }))

    // Generate html from the remaining markdown.
    .pipe(marked())

    // Wrap the markup in div tags, generated from the frontmatter.
    // If the variables are not defined, an error is not generated, they simply are not
    // written. Perfect behavior for my use case, but probably should be more explicit.
    .pipe(header('<div <%= slide_id %> <%= slide_class %> <%= slide_properties %>>\n'))
    .pipe(footer('</div>\n'))

    // Concatenate all the html into a single file.
    .pipe(concat('index.html'))

    // Wrap the generating html in our impressjs header and footer.
    .pipe(header(fs.readFileSync('src/templates/impress-header.tpl', 'utf8')))
    .pipe(footer(fs.readFileSync('src/templates/impress-footer.tpl', 'utf8')))

    // Write the index file.
    .pipe(gulp.dest(dist))

    // Fill up our logs.
    gutil.log('Recompiled index.html')
});

答案 4 :(得分：0)

对我来说，解决方案是使用gulp-data进行微小更改（插件自述文件中描述的方法不起作用）：

...
.pipe(frontMatter())
.pipe(data(function(file) {
    return file.frontMatter;
}))
.pipe(template())
...

或与coffeescript：

...
.pipe frontMatter()
.pipe data (file) ->
    file.frontMatter
.pipe template()
...

答案 5 :(得分：-1)

似乎很好 如果用

显示错误怎么办？

error_reporting(E_ALL);

或类似的？

相关问题
最新问题