Question

我正在使用gulp-markdown-to-json和gulp-jade

我的目标是从markdown文件中获取数据，如下所示：

---
template: index.jade
title: Europa
---
This is a test.

抓取template: index.jade文件并将其与其他变量一起传递给jade编译器。

到目前为止，我有这个：

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，并且在jade编译器运行之前将jade模板文件名提供给gulp.src。

Answer 1

gulp-jade是您的用例错误的gulp插件。

如果您要填充数据的模板流，请使用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'})

您的情况稍微困难一些，因为您需要为每个.jade文件使用不同的.md模板。幸运的是，gulp-wrap接受一个函数，该函数可以为流中的每个文件返回不同的模板：

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 /文档/页/ test.md

---
template: index.jade
title: Europa
---
This is a test.

<强>的src /文档/模板/ index.jade

doctype html
html(lang="en")
  head
    title=contents.title
  body
    h1=contents.title
    div !{contents.body}

<强> DIST /文档/的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文件

1 个答案: