gulp-layouts

gulp-layouts

Gulp plugin for the layouts lib, which provides a simple way of using common code or content to wrap other files. Can be used with HTML, javascript, banners, CSS, or any other string.

Install

Install with npm:

$ npm install --save gulp-layouts

What is a layout?

A layout is a template that is used to "wrap" other files with common content or code.

Example

Given you have a layout, default.txt with the following contents:

foo
{% body %}
bar

If you specify the name of the layout on the file.layout property, like so:

var File = require('vinyl');
var file = new File({path: 'foo/bar.txt', contents: new Buffer('This is contents')});
file.layout = 'default.txt';

Then pass the layout to the layouts() plugin:

var layout = new File({path: 'default.txt', contents: new Buffer('foo\n{% body %}\nbar')});

gulp.task('default', function() {
  return gulp.src('test/fixtures/alpha.txt')
    .pipe(layouts({files: {'default.txt': layout}}))
    .pipe(gulp.dest('test/actual'));
});

Results in:

foo
This is contents
bar

Visit layouts for more examples. The unit tests are really helpful as well.

Usage

Pass an object of vinyl files on options.files for the plugin to use as "layouts":

• the contents of each file must have a {% body %} tag. See the layouts docs if you need to customize this.
• layouts can specify other layouts
• a default layout can be specified on options.defaultLayout

Examples

Apply banners

Given you have a javascript file, index.js, with the following contents:

module.exports = function() {
};

Define layouts

and this banner, in banner.js:

/*!
 * <%= name %> <<%= homepage %>>
 *
 * Copyright (c) <%= year %>, <%= author %>.
 * Licensed under the MIT License.
 */

You can easily create a layout to apply banners to any files:

var fs = require('fs');
var gulp = require('gulp');
var layouts = require('gulp-layouts');

var files = {banner: {contents: fs.readFileSync('banner.js')}};
var data = require('./package');
data.year = new Date().getFullYear();

gulp.task('default', function() {
  return gulp.src('test/fixtures/alpha.txt')
    .pipe(layouts({files: files, defaultLayout: 'banner'}))
    .pipe(template(data))
    .pipe(gulp.dest('test/actual'));
});

Results in something like:

/*!
 * your-package <https://github.com/foo/your-package>
 *
 * Copyright (c) 2016, Santa Claus.
 * Licensed under the MIT License.
 */
module.exports = function() {
};

Nested layouts

Given you have a file, alpha.txt, with the following contents:

This is the alpha file!

Define layouts

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

var files = {
  aaa: {contents: new Buffer('aaa before\n{% body %}\naaa after'), layout: 'bbb'},
  bbb: {contents: new Buffer('bbb before\n{% body %}\nbbb after'), layout: 'ccc'},
  ccc: {contents: new Buffer('ccc before\n{% body %}\nccc after')},
};

gulp.task('default', function() {
  return gulp.src('test/fixtures/alpha.txt')
    .pipe(layouts({files: files}))
    .pipe(gulp.dest('test/actual'));
});

Results in:

The contents of alpha.txt is updated to:

ccc before
bbb before
aaa before
This is the alpha file!
aaa after
bbb after
ccc after

About

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Building docs

(This document was generated by verb-generate-readme (a verb generator), please don't edit the readme directly. Any changes to the readme must be made in .verb.md.)

To generate the readme and API documentation with verb:

$ npm install -g verb verb-generate-readme && verb

Running tests

Install dev dependencies:

$ npm install -d && npm test

Author

Jon Schlinkert

• github/jonschlinkert
• twitter/jonschlinkert

License

Copyright © 2016, Jon Schlinkert. Released under the MIT license.

This file was generated by verb, v0.9.0, on July 25, 2016.