Swig 以及 YAML front-matter 模板

Swig 以及 YAML front-matter 模板

模板可以使用 gulp-swig 和 gulp-front-matter 来设置：

page.html

---
title: Things to do
todos:
    - First todo
    - Another todo item
    - A third todo item
---
<html>
    <head>
        <title>{{ title }}</title>
    </head>
    <body>
        <h1>{{ title }}</h1>
        <ul>{% for todo in todos %}
          <li>{{ todo }}</li>
        {% endfor %}</ul>
    </body>
</html>

gulpfile.js

var gulp = require('gulp'
var swig = require('gulp-swig'
var frontMatter = require('gulp-front-matter'

gulp.task('compile-page', function() {
  gulp.src('page.html')
      .pipe(frontMatter{ property: 'data' }))
      .pipe(swig())
      .pipe(gulp.dest('build')
}

gulp.task('default', ['compile-page']