Example on using the object

[dr-potato]

I'm sorry, I must be a noob, but it isn't clear to me how to use the object generated with gulp-front-matter. The examples are clear to me, but they don't show how you would use the object in a template for example.

I have the following code in 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));
});

And am using it with this template:

---
name: MyName

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

This is the error I get when I run gulp:

[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)

I must be doing something wrong, and it's probably stupid. Or it might be a legitimate bug. Can you tell what's causing the error? I'm sure others of my 'skill level' will have the same problem. Maybe adding a simple usecase to the docs would solve this.

Thanks!

[baamenabar]

+1

[adam-lynch]

The gulp-ssg templates example might help. Ignore the marked & ssg bits, just notice you have to manually iterate over each file and render the templates manually

[brianmhunt]

t'would be great if the plugin took another option on:, being the option the property is added to (instead of file. e.g.

var opts = {}
gulp.task('default', function () {
  return gulp.src( ['./**/*.{md,markdown}'] )
    .pipe(frontMatter({
      property: 'front' // property added to file object
      on: opts
    }))
    .pipe(header(page, opts)) // opts.front is now the stuff of legends .. er .. you know :)
   // ...
});

[frob]

I thought that this was a good idea. Now I no longer think it is. We should probably just load the front-matter with node or find another way to use it.