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

2024-04-07

我在用着gulp-markdown-to-json and gulp-jade

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

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

grab 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 中。


gulp-jade是不适合您的用例的 gulp 插件。

  • 如果您有要填充数据的模板流,请使用gulp-jade https://www.npmjs.com/package/gulp-jade:

    gulp.src('*.jade')
      .pipe(...)
      .pipe(jade({title:'Some title', text:'Some text'}))
    
  • 如果您想在模板中呈现数据流,请使用gulp-wrap https://www.npmjs.com/package/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/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}

距离/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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

gulp通过markdown json用jade生成html文件 的相关文章

随机推荐