有降价和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通过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.htmlgulp 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>

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

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

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