带有 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/pages/index.md 作为 /app/index.html 到 /app/templates/pages/index 的内容.nunjucks？当前任务失败 Template render error: (unknown path)。

本质上，我试图扩展这里取得的成就：

Answer 1

我有一个简化版本的设置运行ning，它使用与您发布的完全相同的 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 在内部抽象出许多模板引擎之间的差异，我没有费心弄清楚如何以及是否允许您提供自定义加载程序。

带有 markdown 和 nunjucks 的 gulp 工作流程

A gulp workflow with markdown and nunjucks

markdown

nunjucks

gulp