Gulp Front Matter + Уценка через нуньюки

Question

Я работаю над добавлением некоторой простой обработки Markdown в мой процесс Gulp, но я не могу заставить все части работать вместе. Кажется, мне не хватает шага между получением содержимого переднего плана и определением, какой шаблон 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/'))
});

Файл уценки выглядит так:

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

...markdown content...

Я чувствую, что он движется в правильном направлении, но я не могу понять, куда ушли эти данные, и как открыть их для рендеринга Nunjucks. Любая помощь?

Answer 1

Тебе нужно gulp-wrap и оригинал nunjucks,

gulp-nunjucks - это инструмент для компиляции потока шаблонов nunjucks, но вам нужно просто обернуть содержимое в шаблон nunjucks, и для этого и нужен gulp-wrap.

Пытаться npm install gulp-wrap nunjucks в дополнение к другим настройкам, а затем следующие должны работать.

gulpfile

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>

Answer 2

Возможно, вы захотите взглянуть на плагин gulp-ssg. Я не знаю, чего это стоит, но это упоминалось в этом выпуске для человека, у которого была такая же проблема, как и у вас.

Не совсем то, что вы ищете, но для такого рода работы у меня был успех, используя металлист. Вы даже можете смешать его с gulp, если, как и я, у вас, например, более сложная обработка ваших ресурсов javascripts.