CODEWITHSUNDEEP
gulppugmarkdownstatic-site
user796443
user796443

Reputation:

gulp generate html file with jade via markdown json

I'm using gulp-markdown-to-json and gulp-jade

My aim is to grab data from markdown file which looks like this:

---
template: index.jade
title: Europa
---
This is a test.

grab template: index.jade file and pass it along with other variables to jade compiler.

So far I've this:

gulp.task('docs', function() {
  return gulp
    .src('./src/docs/pages/*.md')
    .pipe(md({
      pedantic: true,
      smartypants: true
    }))

    .pipe(jade({
      jade: jade,
      pretty: true
    }))
    .pipe(gulp.dest('./dist/docs'));
});

I'm missing a step where json from markdown is read, and jade template filename fed to gulp.src before jade compiler runs.

Upvotes: 3

Views: 1542

Answers (2)

denysdovhan
denysdovhan

Reputation: 986

You don't need to use gulp-markdownto-json. There if a lot of better solutions. For example:

  • Remark — is an markdown processor that parse Markdown into AST-tree (in JSON format). It has support of YAML-frontmatter out of the box. By the way, there are a lot of plugins for different use-cases.
  • article-data — extracts data from your markdown article without using of frontmatter. Personally, I use this package, because it helps me to write juse plain markdown files, with no worries about correct data in frontmatter. It just exracts data from markdown file and then you may do whatever: pass to the gulp-plugin, collect into array, analyze your articles, etc.

Here is an example how I use article-data in my personal blog.

Upvotes: 0

Sven Schoenung
Sven Schoenung

Reputation: 30564

gulp-jade is the wrong gulp plugin for your use case.

  • If you have a stream of templates that you want to fill with data, use gulp-jade:

    gulp.src('*.jade')
  .pipe(...)
  .pipe(jade({title:'Some title', text:'Some text'}))

  • If you have a stream of data that you want to render in templates, use gulp-wrap:

    gulp.src('*.md')
  .pipe(...)
  .pipe(wrap({src:'path/to/my/template.jade'})

Your case is a little more difficult, since you want a different .jade template for each .md file. Luckily gulp-wrap accepts a function which can return a different template for each file in the stream:

var gulp = require('gulp');
var md = require('gulp-markdown-to-json');
var jade = require('jade');
var wrap = require('gulp-wrap');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var fs = require('fs');

gulp.task('docs', function() {
  return gulp.src('./src/docs/pages/*.md')
    .pipe(plumber()) // this just ensures that errors are logged
    .pipe(md({ pedantic: true, smartypants: true }))
    .pipe(wrap(function(data) {
      // read correct jade template from disk
      var template = 'src/docs/templates/' + data.contents.template;
      return fs.readFileSync(template).toString();
    }, {}, { engine: 'jade' }))
    .pipe(rename({extname:'.html'}))
    .pipe(gulp.dest('./dist/docs'));
});

src/docs/pages/test.md

---
template: index.jade
title: Europa
---
This is a test.

src/docs/templates/index.jade

doctype html
html(lang="en")
  head
    title=contents.title
  body
    h1=contents.title
    div !{contents.body}

dist/docs/test.html

<!DOCTYPE html><html lang="en"><head><title>Europa</title></head><body><h1>Europa</h1><div><p>This is a test.  </p></div></body></html>

Upvotes: 7

Related Questions