gulp通过markdown json生成带有jade的html文件 [英] gulp generate html file with jade via markdown json

问题描述

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

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

  --- 
模板：index.jade 
标题：Europa 
 --- 
这是一个测试。 
  

grab template：index.jade file和

到目前为止，我已经这样做了：

  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模板文件名提供给gulp。 src之前的jade编译器运行。

解决方案

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

• 如果您有要填充数据的模板流，请使用 gulp-jade ：

  
  
  $ $ p $ code $ gulp.src（'*。jade'）
  .pipe（...）
  .pipe（jade {title：'Some title'，text：'Some text'}））
  




• 你有一个你想要在模板中呈现的数据流，使用 gulp-

  
  
  

    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 （函数（数据））{$ b $（$） b //从磁盘读取正确的jade模板
 var template ='src / docs / templates /'+ data.contents.template; 
 return fs.readFileSync（template）.toString（）; $ b $ （{extname：'。html'}））
 .pipe（gulp.dest（'./ dist / docs'））; 
}）; 
  

src / docs / pages / test.md

  --- 
模板：index.jade 
标题：Europa 
 --- 
此是一个测试。 
  

src / docs / templates / index.jade

  doctype html 
 html（lang =en）
目标
 title = contents.title 
 body 
 h1 = contents.title 
 div！{contents.body} 
  

dist / docs / test.html
$ b

 <！DOCTYPE >< html lang =en>< head>< title>< head>< title>< / head>< body>< h1>< div>< p>< ;这是一个测试。 < / P>< / DIV>< /体>< / HTML> 
  

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.

解决方案

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>

这篇关于gulp通过markdown json生成带有jade的html文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！