gulp-dry
v0.1.2
Published
Gulp plugin for Dry, a new template engine with advanced inheritance features.
Downloads
2
Readme
gulp-dry 
Gulp plugin for Dry, a new template engine with advanced inheritance features.
Table of Contents
(TOC generated by verb using markdown-toc)
Install
Install with npm:
$ npm install --save gulp-dryUsage
var dry = require('gulp-dry');
gulp.task('default', function() {
return gulp.src('*.html')
.pipe(dry({files: ['block/templates/*.hbs']}))
.pipe(dest('site'));
});Examples
Visit dry for more information.
Blocks
Define blocks in a template:
<!-- parent.html -->
<!DOCTYPE html>
<html lang="en">
<head>
{% block "head" %}
<meta charset="UTF-8">
<title>Document</title>
{% endblock %}
</head>
<body>
{% block "body" %}
Default body.
{% endblock %}
{% block "footer" %}
Default footer.
{% endblock %}
</body>
</html>You can extend the parent.html template like this:
{% extends "parent.html" %}
{% block "head" %}
<meta charset="UTF-8">
<title>Inherited!</title>
<script src="script.js"></script>
{% endblock %}
{% block "body" %}
<div>This is the body</div>
{% endblock %}
{% block "footer" %}
<div>This is the footer</div>
{% endblock %}Resulting in:
<!-- parent.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inherited!</title>
<script src="script.js"></script>
</head>
<body>
<div>This is the body</div>
<div>This is the footer</div>
</body>
</html>Layouts
Layouts are used for "wrapping" files with common code or content. Layouts can also use blocks, but the strategy for merging them is different. Unlike blocks, when using layouts:
- text nodes from child and parent templates are preserved
- text nodes from child templates that do not belong to a specific block will be rendered into the
bodyblock of the parent layout - layouts may be defined using a
{% body %}tag, or a{% block "body" %} {% endblock %}tag
Layout body block
Example layout template with a body tag:
<!-- some-layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
{% body %}
</body>
</html>When used by another template, like this:
<!-- some-file.html -->
{% layout "some-layout.html" %}
This is content.Results in:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
This is content.
</body>
</html>Layout body block
If you need to define placeholder content, you can define a block instead:
<!-- some-layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
{% block "body" %}
Default content.
{% endblock %}
</body>
</html>When used by another template, like this:
<!-- some-file.html -->
{% layout "some-layout.html" %}
This should overwrite the default content.Results in:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
This should overwrite the default content.
</body>
</html>About
Related projects
- dry: Template engine with support for block helpers, advanced inheritance features, and more. | homepage
- is-glob: Returns
trueif the given string looks like a glob pattern or an extglob pattern… more | homepage - matched: Adds array support to node-glob, sync and async. Also supports tilde expansion (user home) and… more | homepage
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 && verbRunning tests
Install dev dependencies:
$ npm install -d && npm testAuthor
Jon Schlinkert
License
Copyright © 2016, Jon Schlinkert. Released under the MIT license.
This file was generated by verb-generate-readme, v0.1.28, on August 09, 2016.