gulp通过markdown json用jade生成html文件 [英] gulp generate html file with jade via markdown json
问题描述
我正在使用 gulp-markdown-to-json 和 gulp-jade
我的目标是从如下所示的降价文件中获取数据:
My aim is to grab data from markdown file which looks like this:
---
template: index.jade
title: Europa
---
This is a test.
获取 template: index.jade 文件并将其与其他变量一起传递给jade编译器.
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'));
});
我错过了从 markdown 读取 json 的步骤，并且在翡翠编译器运行之前将翡翠模板文件名馈送到 gulp.src.
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 是您的用例的错误 gulp 插件.
gulp-jade is the wrong gulp plugin for your use case.
如果您有要填充数据的模板流，请使用 <代码>gulp-jade:
gulp.src('*.jade')
.pipe(...)
.pipe(jade({title:'Some title', text:'Some text'}))
如果您有要在模板中呈现的数据流，请使用 <代码>gulp-wrap:
gulp.src('*.md')
.pipe(...)
.pipe(wrap({src:'path/to/my/template.jade'})
您的情况有点困难，因为您需要为每个 .md 文件使用不同的 .jade 模板.幸运的是 gulp-wrap 接受一个函数，该函数可以为流中的每个文件返回不同的模板:
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>
这篇关于gulp通过markdown json用jade生成html文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
