Gulp Front Matter +Markdown through Nunjucks

Question

I\'m working on adding some simple Markdown processing to my Gulp process, but I can\'t quite get the pieces to work together. I seem to be missing the step between getting

Answer 1

You need gulp-wrap and original nunjucks.

gulp-nunjucks is a tool for compiling the stream of nunjucks templates, but what you need to do is to wrap your contents in a nunjucks template and that is what gulp-wrap is for.

Try npm install gulp-wrap nunjucks in addition to other settings and then the following should work.

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/'))
});

markdown

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

...markdown content...

layout.nunjucks

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

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

Answer 2

You might want to have a look a the plugin gulp-ssg. I don't know what it's worth, but it was mentionned in this issue for someone who had the same problem as you.

Not exactly what you're looking, but for this kind of work, I've had success using metalsmith. You can even mix it with gulp if, like me, you have more complex processing for your javascripts resources for example.