Gulp Front Matter + Markdown 通过 Nunjucks答案

【问题标题】：Gulp Front Matter +Markdown through NunjucksGulp Front Matter + Markdown 通过 Nunjucks
【发布时间】：2015-12-24 22:22:55
【问题描述】：

我正在努力为我的 Gulp 流程添加一些简单的 Markdown 处理，但我不能完全让这些部分一起工作。我似乎错过了获取前端内容和确定应用哪个 Nunjuck 模板之间的步骤。

这是我的 Gulp 文件中的部分：

gulp.task('pages:md', function() {
  gulp.src('./content/**/*.md')
    .pipe(frontMatter({ // optional configuration
      property: 'frontMatter', // property added to file object
      remove: true // should we remove front-matter header?
    }))
    .pipe(marked({
        // optional : marked options
    }))
    .pipe(nunjucks({
      // ?? Feels like I need to specify which template applies based on the front matter "layout" property?
    }))
    .pipe(gulp.dest('build/'))
});

markdown 文件如下所示：

---
title: Title
layout: layout.html
nav_active: home
---

...markdown content...

我觉得它正朝着正确的方向发展，但能否可视化前沿数据的去向，以及如何将其暴露给 Nunjucks 渲染，尚不清楚。有什么帮助吗？

【问题讨论】：

你过得怎么样@don-h。你的管子工作了吗？
嘿@rickysullivan 最后我对这个过程感到沮丧，并选择了 Metalsmith。能很好地满足我的需要。

标签： gulp markdown nunjucks yaml-front-matter

【解决方案1】：

您可能想看看插件gulp-ssg。我不知道它有什么价值，但在this issue 中提到了与你有同样问题的人。

不完全是您正在寻找的，但是对于这种工作，我使用metalsmith 取得了成功。如果您像我一样对 javascripts 资源进行更复杂的处理，甚至可以将它与 gulp 混合使用。

【讨论】：

【解决方案2】：

您需要gulp-wrap 和原始nunjucks。

gulp-nunjucks 是一个编译 nunjucks 模板流的工具，但是你需要做的是将你的内容包装在一个 nunjucks 模板中，这就是 gulp-wrap 的用途。

除了其他设置之外，尝试npm install gulp-wrap nunjucks，然后以下应该可以工作。

gulp 文件

var gulp = require('gulp')
var wrap = require('gulp-wrap')
var frontMatter = require('gulp-front-matter')
var marked = require('gulp-marked')

var fs = require('fs')

gulp.task('pages:md', function() {
  gulp.src('./content/**/*.md')
    .pipe(frontMatter())
    .pipe(marked())
    .pipe(wrap(function (data) {
      return fs.readFileSync('path/to/layout/' + data.file.frontMatter.layout).toString()
    }, null, {engine: 'nunjucks'}))
    .pipe(gulp.dest('build/'))
});

降价

---
title: Title
layout: layout.nunjucks
nav_active: home
---

...markdown content...

layout.nunjucks

<h1>{{ file.frontMatter.title }}</h1>

<p>{{ contents }}</p>

【讨论】：