带有 markdown 和 nunjucks 的 gulp 工作流程

Question

我正在通过 Gulp 设置使用 Markdown 和 Nunjucks 生成静态页面的工作流程。我目前依赖的两个任务是：

gulp.task('templates', function() {
    return gulp.src('app/templates/pages/*.nunjucks') 
        .pipe(nunjucksRender({
        path: ['app/templates/', 'app/templates/pages/']
        }))
        .pipe(gulp.dest('app'));
});

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

结构如下：

/app
|   index.html
|
+---css
|       app.scss
|       custom.scss
|
+---js
|       app.js
|
+---pages
|       index.md
|
\---templates
    |   layout.nunjucks
    |
    +---macros
    |       nav-macro.nunjucks
    |
    +---pages
    |       index.nunjucks
    |
    \---partials
            navigation.nunjucks

如果我运行gulp templates，这将使用扩展 layout.nunjucks 的 index.nunjucks 将 index.html 编译到 /app。但是，我想使用gulp pages从index.md中绘制frontmatter和Markdown来生成index.html的内容。

我遇到的问题是路径：鉴于上述结构，如何通过 /app/templates/pages/index.nunjucks 使用 /app/pages/index.md 作为 /app/index.html 的内容？目前任务失败，Template render error: (unknown path)。

基本上，我正在尝试扩展这里所取得的成就：Gulp Front Matter +Markdown through Nunjucks

Answer 1

我正在运行您的设置的简化版本，它使用您发布的完全相同的 Gulpfile.js。它看起来像这样：

project/Gulpfile.js 
project/index.html 
project/app/pages/index.md
project/app/templates/layout.nunjucks
project/app/templates/pages/index.nunjucks

index.md

---
title: Example
layout: index.nunjucks
date: 2016-03-01
---
This is the text

layout.nunjucks

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

<div class="date">{% block date %}{% endblock %}</div>

<div>{% block text %}{% endblock %}</div>

index.nunjucks

{% extends "app/templates/layout.nunjucks" %}

{% block date %}
{{file.frontMatter.date}}
{% endblock %}

{% block text %}
{{contents}}
{% endblock %}

index.html 运行后gulp pages:

<h1>Example</h1>

<div class="date">
Tue Mar 01 2016 01:00:00 GMT+0100 (CET)
</div>

<div>
<p>This is the text</p>

</div>

您可能弄错的棘手部分是如何在 index.nunjucks 或其他地方指定 {% extends %} 的路径。

当您运行 gulp 时，它会将当前工作目录 (CWD) 更改为 Gulpfile.js 所在的文件夹（在我的例子中：project/）。默认情况下，nunjuck 使用 FileSystemLoader 搜索 CWD 以加载其他模板。这意味着 .nunjucks 文件中的所有路径都需要相对于 CWD，即项目的基本文件夹。

理论上应该可以提供你自己的FileSystemLoader，这样你就可以指定相对于index.nunjucks的模板路径，但是gulp-wrap在内部使用consolidate来抽象出两者之间的差异许多模板引擎，我没有费心去弄清楚如何以及是否允许您提供自定义加载器。