Gulp Matter Front + Defeat via Nunjucks

Question

I am working on adding simple Markdown processing to my Gulp process, but I cannot completely get the parts to work together. It seems I am missing a step between getting the contents of the front content and determining which Nunjuck template is being applied.

Here is the section in my gulp file:

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

The markdown file is as follows:

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

...markdown content...

I feel this is heading in the right direction, but I can visualize where the front subject data went and how to expose its Nunjucks rendering is unclear. Any help?

Answer 1

You need the gulp-wraporiginal 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. , , , , .

, , metalsmith. gulp, , , javascripts, .