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

Question

I want to pass gulp frontmatters output to another function I'm using in Gulp (gulp template). I think I've got the syntax right, but must be doing something wrong because it isn't working.

The gulp plugins I'm using are: Gulp frontmatter and Gulp template . I'm trying to pass an object called page from frontmatter() to template() like so:

.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

This isn't working. What am I doing wrong?

---

For reference: this is the entire code from my 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));
});

This is the template I'm using (test/test.md):

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

And this is the error message I'm getting:

[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

You never defined page .. So you get:

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

The gulp-front-matter plugin adds the front matter to a property on the file object, which gulp passes around via the pipe method. So you need to use another plugin that can consume that property, if you want to do something with the front matter. Otherwise just add the remove: true option to the front matter options hash.

From there you should be able to just call template() (with no options), and I'm not sure, but maybe the page property is accessible from your template..

Edit

The grunt-template plugin does not take any data from the file object, which has our data, when gulp sends it. My solution is to use the lodash template directly, and to pass the chunk and frontmatter data that way.

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'));
});

Answer 2

Looks like gulp-template is set up to listen for a property on the file object called "file.data". This being the case, this would be very easy to accomplish using the gulp-data plugin https://www.npmjs.org/package/gulp-data . There's an example in the README on how to pass frontmatter.

Answer 3

So none of the answers to this question have worked for me, unfortunately. I got reasonably far using gulp-vartree , which can store a property in a variable and that is kind of what I wanted to do.

In the end however, I ran into new issues, so I ended up switching to grunt stencil , since it does exactly what I want without any of the hassle.

Answer 4

After searching for solutions to this problem and finding nothing, I built one myself (new gulp-user, so I apologize if this is a horrible solution, but at least it's something):

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')
});

Answer 5

For me the solution was to use gulp-data with minor changes (the method described in the plugin README, was not working):

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

or with coffeescript:

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

Answer 6

seems to be good what if you display errors with

error_reporting(E_ALL);

or similar?