• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

shannonmoeller/gulp-hb: A sane Gulp plugin to compile Handlebars templates. Usef ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

shannonmoeller/gulp-hb

开源软件地址(OpenSource Url):

https://github.com/shannonmoeller/gulp-hb

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

gulp-hb

NPM version Downloads Build Status Coverage Status Tip

A sane static Handlebars Gulp plugin. Useful as a static site generator. Powered by handlebars-wax. Think Assemble, but with a lot less Jekyll baggage.

To precompile templates into JavaScript, see gulp-handlebars.

Install

$ npm install --save-dev gulp-hb

Usage

const gulp = require('gulp');
const hb = require('gulp-hb');

// Basic

function basic() {
    return gulp
        .src('./src/{,posts/}*.html')
        .pipe(hb()
            .partials('./src/assets/partials/**/*.hbs')
            .helpers('./src/assets/helpers/*.js')
            .data('./src/assets/data/**/*.{js,json}')
        )
        .pipe(gulp.dest('./web'));
}

gulp.task('basic', basic);

// Advanced

function advanced() {
    const hbStream = hb({ debug: true })
        // Partials
        .partials('./partials/components/**/*.{hbs,js}')
        .partials('./partials/layouts/**/*.{hbs,js}')
        .partials({
            boo: '{{#each boo}}{{greet}}{{/each}}',
            far: '{{#each far}}{{length}}{{/each}}'
        })

        // Helpers
        .helpers(require('handlebars-layouts'))
        .helpers('./helpers/**/*.js')
        .helpers({
            foo: function () { ... },
            bar: function () { ... }
        })

        // Decorators
        .decorators('./decorators/**/*.js')
        .decorators({
            baz: function () { ... },
            qux: function () { ... }
        })

        // Data
        .data('./data/**/*.{js,json}')
        .data({
            lorem: 'dolor',
            ipsum: 'sit amet'
        });

    return gulp
        .src('./src/{,posts/}*.html')
        .pipe(hbStream)
        .pipe(gulp.dest('./web'));
}

gulp.task('advanced', advanced);

Template Context

The template context is a merge of pre-registered data and file-specific data. Pre-registered data is available to all templates and is set using the .data() method. File-specific data is available to the current template and is set via the file.data property.

@ Data Variables

@root

The merged object of pre-registered data and file-specific data is available as the primary context of your templates. In cases where accessing this data would require the use of ../, you may access the top-level context via @root:

{{ foo }}
{{ @root.foo }}

{{#each bar}}
    {{ ../foo }}
    {{ @root.foo }}
{{/each}}
@global

In cases where file-specific data keys collide with pre-registered data keys, you may access the pre-registered data via @global:

{{ @global.foo }}
@local

In cases where pre-registered data should be ignored, you may access the file-specific data via @local.

{{ @local.foo }}
@file

In cases where information about the template file itself is needed, you may access the file object via @file:

{{ @file.path }}

File-specific Data Sources

File-specific data is set via the file.data property using other plugins such as gulp-data, gulp-data-json, or gulp-front-matter.

const gulp = require('gulp');
const data = require('gulp-data');
const frontMatter = require('gulp-front-matter');
const hb = require('gulp-hb');

function inject() {
    return gulp
        .src('./src/*.html')

        // Load an associated JSON file per post.
        .pipe(data((file) => {
            return require(file.path.replace('.html', '.json'));
        }))

        // Parse front matter from post file.
        .pipe(frontMatter({
            property: 'data.frontMatter'
        }))

        // Data for everyone.
        .pipe(hb().data('./data/**/*.js'))

        .pipe(gulp.dest('./web'));
}

gulp.task('inject', inject);

Multiple Data Sources

Multiple data sources can be used to render the same set of templates to different directories using through2.

const gulp = require('gulp');
const hb = require('gulp-hb');
const through = require('through2');

function i18n() {
    return gulp
        .src('./i18n/*.json')
        .pipe(through.obj((file, enc, cb) => {
            const locale = file.stem;
            const data = {
                locale: locale,
                i18n: JSON.parse(file.contents.toString())
            };

            gulp
                .src('./templates/**/*.html')
                .pipe(hb().data(data))
                .pipe(gulp.dest('./dist/' + locale))
                .on('error', cb)
                .on('end', cb);
        }));
}

gulp.task('i18n', i18n);

API

hb([options]): TransformStream

  • options {Object} (optional) Passed directly to handlebars-wax so check there for more options.
    • bustCache {Boolean} (default: true) Force reload data, partials, helpers, and decorators.
    • cwd {String} (default: process.cwd()) Current working directory.
    • debug {Boolean|Number} (default: false or 0) Whether to log registered functions and data (true or 1) and glob parsing (2).
    • handlebars {Handlebars} (optional) A specific instance of Handlebars, if needed.
    • compileOptions {Object} Options to use when compiling templates.
    • templateOptions {Object} Options to use when rendering templates.
    • partials {String|Array.<String>|Object|Function(handlebars)}
    • parsePartialName {Function(options, file): String}
    • helpers {String|Array.<String>|Object|Function(handlebars)}
    • parseHelperName {Function(options, file): String}
    • decorators {String|Array.<String>|Object|Function(handlebars)}
    • parseDecoratorName {Function(options, file): String}
    • data {String|Array.<String>|Object}
    • parseDataName {Function(options, file): String}

Returns a Gulp-compatible transform stream that compiles Handlebars templates to static output.

.partials(pattern [, options]): TransformStream

  • pattern {String|Array<String>|Object|Function(handlebars)}
  • options {Object} Same options as hb().

Loads additional partials. See handlebars-wax.

.helpers(pattern [, options]): TransformStream

  • pattern {String|Array<String>|Object|Function(handlebars)}
  • options {Object} Same options as hb().

Loads additional helpers. See handlebars-wax.

.decorators(pattern [, options]): TransformStream

  • pattern {String|Array<String>|Object|Function(handlebars)}
  • options {Object} Same options as hb().

Loads additional decorators. See handlebars-wax.

.data(pattern [, options]): TransformStream

  • pattern {String|Array<String>|Object}
  • options {Object} Same options as hb().

Loads additional data. See handlebars-wax.

Contribute

Standards for this project, including tests, code coverage, and semantics are enforced with a build tool. Pull requests must include passing tests with 100% code coverage and no linting errors.

Test

$ npm test

MIT © Shannon Moeller




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
cssanimation/gulp-sass-starter发布时间:2022-06-21
下一篇:
amylily1011/gulp4-sass-bootstrap: Using Gulp 4 and BrowserSync to automate chang ...发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap