Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonschlinkert/gulp-layouts
Gulp plugin for the `layouts` library, which provides a simple way of "wrapping" a string with common code or content.
https://github.com/jonschlinkert/gulp-layouts
gulp gulpplugin javascript layout layouts nodejs plugin render template
Last synced: 9 days ago
JSON representation
Gulp plugin for the `layouts` library, which provides a simple way of "wrapping" a string with common code or content.
- Host: GitHub
- URL: https://github.com/jonschlinkert/gulp-layouts
- Owner: jonschlinkert
- License: mit
- Created: 2016-07-26T02:21:05.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-07-26T02:40:07.000Z (over 8 years ago)
- Last Synced: 2025-02-01T02:02:54.709Z (14 days ago)
- Topics: gulp, gulpplugin, javascript, layout, layouts, nodejs, plugin, render, template
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-layouts [](https://www.npmjs.com/package/gulp-layouts) [](https://npmjs.org/package/gulp-layouts) [](https://travis-ci.org/jonschlinkert/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](https://www.npmjs.com/):
```sh
$ 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:
```js
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:
```js
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](https://github.com/doowb/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](https://github.com/doowb/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:
```js
module.exports = function() {
};
```
**Define layouts**
and this banner, in `banner.js`:
```js
/*!
* <%= name %> <<%= homepage %>>
*
* Copyright (c) <%= year %>, <%= author %>.
* Licensed under the MIT License.
*/
```
You can easily create a layout to apply banners to any files:
```js
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:**
```js
/*!
* 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**
```js
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](../../issues/new).
### Building docs
_(This document was generated by [verb-generate-readme](https://github.com/verbose/verb-generate-readme) (a [verb](https://github.com/verbose/verb) generator), please don't edit the readme directly. Any changes to the readme must be made in [.verb.md](.verb.md).)_
To generate the readme and API documentation with [verb](https://github.com/verbose/verb):
```sh
$ npm install -g verb verb-generate-readme && verb
```
### Running tests
Install dev dependencies:
```sh
$ npm install -d && npm test
```
### Author
**Jon Schlinkert**
* [github/jonschlinkert](https://github.com/jonschlinkert)
* [twitter/jonschlinkert](http://twitter.com/jonschlinkert)
### License
Copyright © 2016, [Jon Schlinkert](https://github.com/jonschlinkert).
Released under the [MIT license](https://github.com/jonschlinkert/gulp-layouts/blob/master/LICENSE).
***
_This file was generated by [verb](https://github.com/verbose/verb), v0.9.0, on July 25, 2016._