个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 05:24:19 25 4
gpt4 key购买 nike

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

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

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

最佳答案

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通过markdown json用jade生成html文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36500547/

25 4 0
文章推荐： web-services - UEFA/FIFA 分数 API
文章推荐： exception - ASP.NET Web API : Non-descriptive 500 Internal Server Error
文章推荐： 返回 void 的 ASP.Net MVC Controller 操作
文章推荐： react-native - 何时使用 TouchableNativeFeedback、TouchableHighlight 或 TouchableOpacity？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com