Close #860 PR: Add templating example using Swig and YAML frontmatter.

gulpjs · Mar 4, 2015 · 346ff9e · 346ff9e
1 parent 5c8ee6d
commit 346ff9e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/docs/recipes/README.md b/docs/recipes/README.md
@@ -19,3 +19,4 @@
 * [Using multiple sources in one task](using-multiple-sources-in-one-task.md)
 * [Browserify + Uglify with sourcemaps](browserify-uglify-sourcemap.md)
 * [Output both a minified and non-minified version](minified-and-non-minified.md)
+* [Templating with Swig and YAML front-matter](templating-with-swig-and-yaml-front-matter.md)
diff --git a/docs/recipes/templating-with-swig-and-yaml-front-matter.md b/docs/recipes/templating-with-swig-and-yaml-front-matter.md
@@ -0,0 +1,42 @@
+# Templating with Swig and YAML front-matter
+Templating can be setup using `gulp-swig` and `gulp-front-matter`:
+
+##### `page.html`
+
+```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`
+
+```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']);
+```