gulp 通过 markdown json 用 jade 生成 html 文件

Question

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

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

---
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'));
});

我错过了一个步骤，其中 json 来自 markdown 被读取，并且在 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'})

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

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.玉

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>

Answer 2

您不需要使用 gulp-markdownto-json。如果有很多更好的解决方案。例如：

Remark — 是一个 markdown 处理器，它将 Markdown 解析为 AST 树（JSON 格式）。它开箱即用地支持 YAML-frontmatter。顺便说一下，有很多针对不同用例的插件。
article-data — 在不使用 frontmatter 的情况下从 markdown 文章中提取数据。就我个人而言，我使用这个包，因为它可以帮助我编写 juse plain markdown 文件，而不用担心 frontmatter 中的正确数据。它只是从 markdown 文件中提取数据，然后你可以做任何事情：传递给 gulp-plugin，收集到数组中，分析你的文章，等等

Here is an example 我如何在个人博客中使用 article-data。

gulp 通过 markdown json 用 jade 生成 html 文件

gulp generate html file with jade via markdown json

gulp

pug

markdown

static-site