gulp generate html file with jade via markdown jso

2019-04-11 16:52发布

站内问答 / 后端开发
1623 2 6

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.

2条回答
地球回转人心会变
2楼-- · 2019-04-11 17:29

You don't need to use gulp-markdownto-json. There if a lot of better solutions. For example:

  • Remark — is an markdown processor that parse Markdown into AST-tree (in JSON format). It has support of YAML-frontmatter out of the box. By the way, there are a lot of plugins for different use-cases.
  • article-data — extracts data from your markdown article without using of frontmatter. Personally, I use this package, because it helps me to write juse plain markdown files, with no worries about correct data in frontmatter. It just exracts data from markdown file and then you may do whatever: pass to the gulp-plugin, collect into array, analyze your articles, etc.

Here is an example how I use article-data in my personal blog.

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
3楼-- · 2019-04-11 17:32

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)