Gulp plugin for Dry, a new template engine with advanced inheritance features.
Gulp plugin for Dry, a new template engine with advanced inheritance features.
(TOC generated by verb using markdown-toc)
Install with npm:
$ npm install --save gulp-dry
var dry = require('gulp-dry');
gulp.task('default', function() {
return gulp.src('*.html')
.pipe(dry({files: ['block/templates/*.hbs']}))
.pipe(dest('site'));
});
Visit dry for more information.
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 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:
body block of the parent layout{% body %} tag, or a {% block "body" %} {% endblock %} tagExample 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>
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>
true if the given string looks like a glob pattern or an extglob pattern… more | homepagePull requests and stars are always welcome. For bugs and feature requests, please create an issue.
(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
Install dev dependencies:
$ npm install -d && npm test
Jon Schlinkert
Copyright © 2016, Jon Schlinkert. Released under the MIT license.
This file was generated by verb-generate-readme, v0.1.28, on August 09, 2016.
FAQs
Gulp plugin for Dry, a new template engine with advanced inheritance features.
We found that gulp-dry demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A surge of AI-generated vulnerability reports has pushed open source maintainers to rethink bug bounties and tighten security disclosure processes.
Product
Scan results now load faster and remain consistent over time, with stable URLs and on-demand rescans for fresh security data.
Product
Socket's new Alert Details page is designed to surface more context, with a clearer layout, reachability dependency chains, and structured review.