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

【问题标题】：gulp generate html file with jade via markdown jsongulp通过markdown json用jade生成html文件
【发布时间】：2016-07-29 18:33:18
【问题描述】：

我正在使用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'));
});

我错过了从 markdown 读取 json 的步骤，并且在玉编译器运行之前将玉模板文件名馈送到 gulp.src。

【问题讨论】：

标签： gulp pug markdown static-site

【解决方案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 接受一个函数，该函数可以为流中的每个文件返回不同的模板：

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...我从 jekyll 迁移到了中间人，到了 gatsby，再到了 metalsmith - 并意识到我不需要任何这些工具，gulp 可以做这一切。
aargh，gulp-wrap 抱怨在jade 中扩展：“文件名”选项需要使用“扩展”和“相对”路径，> 1|扩展_layout

【解决方案2】：

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

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

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

【讨论】：