gulp-layout

gulp-layout

Gulp plugin to apply a defferent template for each file (like a jekyll)

Download

gulp-layout

Gulp plugin to switch layout files for each content (like a jekyll). We can use many template engines thanks to consolidate.js.

Install

npm install gulp-layout

Usage

Simple task to build html

var gulp = require('gulp');
var layout = require('gulp-layout');

gulp.task('build', function() {
  return gulp.src('./src/test.html')
    .pipe(layout({
      title: 'Hello World',
      layout: 'post.pug'
    }))
    .pipe(gulp.dest('./dist'));
});

(src) test.html:

<p>gulp</p>

(layout) post.pug:

h1= title
|!= contents

(dist) test.html:

<h1>Hello World</h1><p>gulp</p>

Like a jekyll

Use gulp-markdown & gulp-front-matter (thanks!)

var gulp = require('gulp');
var frontMatter = require('gulp-front-matter');
var markdown = require('gulp-markdown');
var layout = require('gulp-layout');

gulp.task('build', function() {
  return gulp.src('./src/**/*.md')
    .pipe(frontMatter())
    .pipe(markdown())
    .pipe(layout(function(file) {
      return file.frontMatter;
    }))
    .pipe(gulp.dest('./dist'));
});

(src) test.md:

---
title: Hello World
layout: post.pug
---

gulp

(layout) post.pug:

doctype html
html
  head
   title= title
  body
    != contents

(dist) test.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <p>gulp</p>
  </body>
</html>

More example: see examples.

Options

layout(options)

  • options {Object}
    • layout {String}: File path of template. If not set engine, select the template engine by this extension.
    • engine {String}: Name of template engine. Use this option if cannot decide the engine by layout. For example, the extension of layout is .html

layout(func)

  • func {Function}: Please return options. It will be called with the file.

License

MIT License

minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog