Menu
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>
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
