❤
npm
Sign UpSign In

gulp-dry

0.1.2 • Public • Published

gulp-dry NPM version NPM downloads Build Status

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-dry

Usage

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 body block 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 true if 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 && verb

Running tests

Install dev dependencies:

$ npm install -d && npm test

Author

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.

Readme

Keywords

Package Sidebar

Install

npm i gulp-dry

Repository

github.com/jonschlinkert/gulp-dry

Homepage

github.com/jonschlinkert/gulp-dry

Weekly Downloads

3

Version

0.1.2

License

MIT

Last publish

Collaborators

  • jonschlinkert
Try on RunKit
Report malware