I'm using gulp-markdown-to-json
and gulp-jade
My aim is to grab data from markdown file which looks like this:
---
template: index.jade
title: Europa
---
This is a test.
grab template: index.jade
file and pass it along with other variables to jade compiler.
So far I've this:
gulp.task('docs', function() {
return gulp
.src('./src/docs/pages/*.md')
.pipe(md({
pedantic: true,
smartypants: true
}))
.pipe(jade({
jade: jade,
pretty: true
}))
.pipe(gulp.dest('./dist/docs'));
});
I'm missing a step where json from markdown is read, and jade template filename fed to gulp.src before jade compiler runs.
gulp-jade
is the wrong gulp plugin for your use case.
If you have a stream of templates that you want to fill with data, use gulp-jade
:
gulp.src('*.jade')
.pipe(...)
.pipe(jade({title:'Some title', text:'Some text'}))
If you have a stream of data that you want to render in templates, use gulp-wrap
:
gulp.src('*.md')
.pipe(...)
.pipe(wrap({src:'path/to/my/template.jade'})
Your case is a little more difficult, since you want a different .jade
template for each .md
file. Luckily gulp-wrap
accepts a function which can return a different template for each file in the stream:
var gulp = require('gulp');
var md = require('gulp-markdown-to-json');
var jade = require('jade');
var wrap = require('gulp-wrap');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var fs = require('fs');
gulp.task('docs', function() {
return gulp.src('./src/docs/pages/*.md')
.pipe(plumber()) // this just ensures that errors are logged
.pipe(md({ pedantic: true, smartypants: true }))
.pipe(wrap(function(data) {
// read correct jade template from disk
var template = 'src/docs/templates/' + data.contents.template;
return fs.readFileSync(template).toString();
}, {}, { engine: 'jade' }))
.pipe(rename({extname:'.html'}))
.pipe(gulp.dest('./dist/docs'));
});
src/docs/pages/test.md
---
template: index.jade
title: Europa
---
This is a test.
src/docs/templates/index.jade
doctype html
html(lang="en")
head
title=contents.title
body
h1=contents.title
div !{contents.body}
dist/docs/test.html
<!DOCTYPE html><html lang="en"><head><title>Europa</title></head><body><h1>Europa</h1><div><p>This is a test. </p></div></body></html>
You don't need to use gulp-markdownto-json
. There if a lot of better solutions. For example:
- Remark — is an markdown processor that parse Markdown into AST-tree (in JSON format). It has support of YAML-frontmatter out of the box. By the way, there are a lot of plugins for different use-cases.
- article-data — extracts data from your markdown article without using of frontmatter. Personally, I use this package, because it helps me to write juse plain markdown files, with no worries about correct data in frontmatter. It just exracts data from markdown file and then you may do whatever: pass to the gulp-plugin, collect into array, analyze your articles, etc.
Here is an example how I use article-data in my personal blog.