npmpackage.info

Gathering detailed insights and metrics for grunt-handlebars-layouts

Other packages similar to grunt-handlebars-layouts

grunt-handlebars-simple-layouts

0.2.4

Handlebars task to render Handlebars templates to HTML

Gathering detailed insights and metrics for grunt-handlebars-layouts

grunt-handlebars-layouts - 0.3.0 | npmpackage.info

grunt-handlebars-layouts

A grunt.js task to render Handlebars templates against a context & produce HTML

0.3.0

MIT

JavaScript

345.00 B

29,307 1.7

Installations

npm install grunt-handlebars-layouts

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>= 0.8.0

Node Version

6.9.2

NPM Version

3.10.9 Pull Requests

Open

0

Total

7

Closed

1

Merged

6

Issues

Open

1

Total

9

Closed

8

Releases

grunt-handlebars-layouts

0.3.1

Updated on Mar 10, 2018

minor release

0.2.5

Updated on Jan 12, 2016

minor release

0.2.4

Updated on Jan 05, 2016

2.1 Context extended

0.2.1

Updated on Aug 11, 2015

1.7

Updated on Feb 21, 2015

star it

0.1.6

Updated on Oct 15, 2014

View All 9 releases

Languages

JavaScript

HTML

JavaScript (81.46%)

HTML (18.54%)

Developer

thierryc

Download Statistics

Total Downloads

29,307

Last Day

Last Week

Last Month

353

Last Year

3,253

GitHub Statistics

MIT License

14 Stars

85 Commits

10 Forks

3 Watchers

3 Branches

3 Contributors

Updated on Jun 10, 2020

Bundle Size

572.00 B

Minified

345.00 B

Minified + Gzipped

Bundlephobia

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

0.3.0

Package Id

grunt-handlebars-layouts@0.3.0

Size

11.50 kB

NPM Version

3.10.9

Node Version

6.9.2

Total Downloads

Cumulative downloads

Total Downloads

29,307

Last Day

22.2%

Compared to previous day

Last Week

-19.4%

Compared to previous week

Last Month

8.3%

353

Compared to previous month

Last Year

108.5%

3,253

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Grunt Handlebars Layouts

Handlebars helpers which implement Jade-like layout blocks.

Extend: extend layout (partial)
Append
Replace
Prepend

A grunt.js task to render Handlebars templates against a context & produce HTML.

If you want to pre-compilation your Handlebars use the grunt-contrib-handlebars Grunt task. This task will pre-compile multiple templates into a single file.

Resources

About

This task renders Handlebars templates against a context to produce HTML.

Inspired by grunt-dust-html and handlebars-layouts

Getting Started

This plugin requires Grunt ~0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

1npm install grunt-handlebars-layouts --save-dev

Next, add this line to your project's grunt file:

1grunt.loadNpmTasks("grunt-handlebars-layouts");

This plugin was designed to work with Grunt 0.4.x. If you're still using grunt v0.3.x it's strongly recommended that you upgrade, but in case you can't please use v0.3.3.

Lastly, add the configuration settings (see below) to your grunt file.

Documentation

This task has two required properties, src and dest. src is the path to your source file and dest is the file this task will write to (relative to the grunt.js file). If this file already exists it will be overwritten.

1  files: {
2    'dest.html': 'src.html'
3  },

An example configuration looks like this:

1  grunt.initConfig({
2    handlebarslayouts: {
3      home: {
4        files: {
5          'dist/home.html': 'src/home.html'
6        },
7        options: {
8          partials: [
9            'src/partials/*.hbs',
10            'src/layout.html'
11          ],
12          modules: [
13            'src/helpers/helpers-*.js'
14          ],
15          basePath: 'src/',
16          context: {
17            title: 'Layout Test',
18            items: [
19              'apple',
20              'orange',
21              'banana'
22            ]
23          }
24        }
25      }
26    }
27  });
28  grunt.registerTask('default', ['handlebarslayouts']);

Optional Configuration Properties

This plugin can be customized by specifying the following options:

partials: partials files.
basePath: The base location to all your templates so that includes/partials can be resolved correctly.
context: A JavaScript object to render the template against. This option supports a few different types:
modules: add your customs helpers
strict: when is true the process fails if one file is missing (when is false juste a warning is trigger)

Useful Handlebars Helpers : handlebars-helpers

String: the location to a file containing valid JSON:

1context: '/path/to/file.json'

Object: a regular ol' JavaScript object:

1context: {
2  pageTitle: 'My Awesome Website'
3}

Array: an array of contexts, either string (files to parse) or JavaScript objects (>= 0.2.5), or both. Each item in the array will be merged into a single context and rendered against the template:

1context: [
2  'path/to/context.json',
3  'path/to/another/context.json',
4  { more: 'data' }
5]

Special Var In Context

__filename (add in 0.2.7)

This is the resolved local path of this src file.

use it like {{ __filename }}

or in combination with a helper

Take a look to the example/example_4/.

Template example

1{{#extend "layout"}}
2    {{#append "head"}}
3      <link rel="stylesheet" href="assets/css/home.css" />
4    {{/append}}
5
6    {{#replace "body"}}
7      <h2>Welcome Home</h2>
8
9      <ul>
10        {{#items}}
11          <li>{{.}}</li>
12        {{/items}}
13      </ul>
14    {{/replace}}
15
16    {{#prepend "footer"}}
17      <script src="assets/js/analytics.js"></script>
18    {{/prepend}}
19{{/extend}}

Layout example

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6    {{#block "head"}}
7          <title>{{title}}</title>
8          <meta name="description" content="">
9    {{/block}}
10  </head>
11
12  <body>
13    <div class="site">
14      <div class="site-hd" role="banner">
15        {{#block "header"}}
16            <h1>{{title}}</h1>
17        {{/block}}
18      </div>
19
20      <div class="site-bd" role="main">
21        {{#block "body"}}
22            <h2>Hello World</h2>
23        {{/block}}
24      </div>
25
26      <div class="site-ft" role="contentinfo">
27        {{#block "footer"}}
28            <small>&copy; 2014</small>
29        {{/block}}
30      </div>
31    </div>
32
33    {{#block "footer"}}
34      <p>footer</p>
35    {{/block}}
36  
37    {{> footer}}
38  </body>
39</html>

Partial example

1<footer>footer</footer>

Custom Helper example

Helpers can either be an object or a single register function. If register is on the object, then it calls the register function, passing in the engine.

1module.exports.register = function (Handlebars, options)  { 
2  Handlebars.registerHelper('foo', function ()  { 
3    return 'foo';
4  });
5};

MD5 Helper (inspired by handlebars-md5)

1'use strict';
2
3var crypto = require('crypto'),
4    fs = require('fs');
5
6// The module to be exported
7var helpers = {
8  md5: function (path) {
9    var content = fs.readFileSync(path);
10    return crypto.createHash('md5').update(content).digest('hex');
11  }
12};
13
14// Export helpers
15module.exports.register = function (Handlebars, options) {
16  options = options || {};
17
18  for (var helper in helpers) {
19    if (helpers.hasOwnProperty(helper)) {
20      Handlebars.registerHelper(helper, helpers[helper]);
21    }
22  }
23};

Foo and bar Helpers

1'use strict';
2
3// The module to be exported
4var helpers = {
5  foo: function () {
6    return 'foo';
7  },
8  bar: function () {
9    return 'bar';
10  }
11};
12
13// Export helpers
14module.exports.register = function (Handlebars, options) {
15  options = options || {};
16
17  for (var helper in helpers) {
18    if (helpers.hasOwnProperty(helper)) {
19      Handlebars.registerHelper(helper, helpers[helper]);
20    }
21  }
22};

Handlebars Markdown Helper

Very simple Markdown for partial. do not forget to add your .md files to the partial list.

1options: {
2  partials: 'src/partials/*.md',
3  ...
4}

1/**
2 * Handlebars Markdown Helpers
3 * Copyright (c) 2014 Thierry Charbonnel
4 * Licensed under the MIT License (MIT).
5 */
6'use strict';
7
8var marked = require('marked');
9
10// Export helpers
11module.exports.register = function (Handlebars, options) {
12  options = options || {};
13  options.marked = options.marked || {
14    renderer: new marked.Renderer(),
15    gfm: true,
16    tables: true,
17    breaks: false,
18    pedantic: false,
19    sanitize: true,
20    smartLists: true,
21    smartypants: false
22  };
23  
24  Handlebars.registerHelper('md', function(name, context){
25    var result;
26    marked.setOptions(options.marked);
27    // Convert inline markdown by prepending the name string with `:`
28    if(name.match(/^:/)) {
29      result = marked(name.replace(/^:/, ''));
30    } else {
31      try {
32        result = marked(Handlebars.partials[name]);
33      } catch(err) {
34        result = '<!-- error -->'; 
35      }
36    }
37    return new Handlebars.SafeString(result); 
38  });  
39};
40

npm Helpers

Add it in devDependencies and in gruntfiles.js

1"devDependencies": {
2  "handlebars-helper-moment": "*"
3},

Add it in gruntfiles.js

1handlebarslayouts: {
2  home: {
3    files: {
4      'dist/home.html': 'src/home.html',
5      'dist/index.html': 'src/index.html'
6    },
7    options: {
8      ...
9      modules: ['src/helpers/helpers-*.js', 'handlebars-helper-moment'],
10      ...
11    }
12  }
13}

or ( v0.1.4 > )

1handlebarslayouts: {
2  home: {
3    files: {
4      'dist/*.html': 'src/*.hsb'
5    },
6    options: {
7      ...
8      modules: ['src/helpers/helpers-*.js', 'handlebars-helper-moment'],
9      ...
10    }
11  }
12}

npm install

Tested Helpers

handlebars-helper-moment

suggested structure

A basic Handlebars-layouts site usually looks something like this:

.
├── partials
|   ├── footer.(html|hsb|md)
|   └── header.(html|hsb|md)
├── pages
|   ├── 2014-08-14-Handlebars-layouts-foo.(html|hsb)
|   └── 2014-08-14-Handlebars-layouts-bar.(html|hsb)
├── data
|   └── members.json
├── helpers
|   └── helpers-*.js
└── index.html

grunt file example

1
2/*global module:false*/
3module.exports = function(grunt) {
4  'use strict';
5  grunt.initConfig({
6  
7    handlebarslayouts: {
8      dev: {
9        files: {
10          //'dist/home.html': 'src/home.html'
11          'dist/*.html': 'src/*.hsb'
12        },
13        options: {
14          partials: ['src/partials/*.hbs', 'src/partials/*.md', 'src/layout.html'],
15          basePath: 'src/',
16          modules: ['src/helpers/helpers-*.js', 'handlebars-helper-moment'],
17          context: {
18            title: 'Layout Test',
19            projectName: 'Grunt handlebars layout',
20            items: [
21              'apple',
22              'orange',
23              'banana'
24            ]
25          }
26        }
27      }
28    },
29    
30    connect: {
31      server: {
32        options: {
33          livereload: true,
34          port: 8000,
35          base:'dist/',
36          open: true
37        }
38      }
39    },
40    
41    watch: {
42      layout: {
43        files: 'src/layout.html',
44        tasks: 'handlebarslayouts:dev'
45      },
46      hsb: {
47        files: 'src/**/*.hsb',
48        tasks: 'handlebarslayouts:dev'
49      },
50      options: {
51        livereload: true
52      }
53    },
54    
55  });
56  
57  grunt.loadTasks('../tasks');
58  
59  grunt.loadNpmTasks('grunt-contrib-connect');
60  grunt.loadNpmTasks('grunt-contrib-watch');
61
62  grunt.registerTask('default', ['handlebarslayouts']);
63  
64  grunt.registerTask('serve', ['handlebarslayouts', 'connect:server', 'watch']);
65  
66};
67
68
69
70
71

=======

Other interesting projects

To precompile Handlebars templates to JST file use grunt-contrib-handlebars
Static site generators for Grunt.js, Yeoman and Node.js. Assemble
This task renders Dust templates against a context to produce HTML. grunt-dust-html
Handlebars helpers which implement Jade-like layout blocks for Node project handlebars-layouts
Library of 100+ handlebars helpers. handlebars-helpers
Gulp-Dust Precompiles Dust templates Gulp-Dust

Release History and Roadmap

2016-06-19 v0.2.7 Add New Varibale __filename (the src file name)
2016-01-05 v0.2.5 Parse object in context. bug fix (thanks neagle)
2016-01-05 v0.2.4 bug fix (thanks giuseppepaul)
2015-01-21 v0.2.1 context can be loaded as files (exemple_2)
2015-01-21 v0.2.0 update code
2015-01-21 v0.2.0b ready to work with grunt-contrib-connect and grunt-contrib-watch.
2014-10-08 v0.1.6 windows fix.
2014-10-08 v0.1.4 Add * for file list and unique name for Partials.
2014-09-05 v0.1.3 Better log error + strict mode.
2014-09-05 v0.1.1 Async optimization.
2014-09-03 v0.1.0 First Release.
2014-08-14 v0.0.* Alpha ans Beta Releases

License

Gulp version.

Soon. Help is welcome. (contact me)

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

67 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-6cpc-mj5c-m9rq
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-957j-59c2-j692
Warn: Project is vulnerable to: GHSA-m5pj-vjjf-4m3h
Warn: Project is vulnerable to: GHSA-j383-35pm-c5h4
Warn: Project is vulnerable to: GHSA-rm36-94g8-835r
Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2
Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-87vv-r9j6-g5qv
Warn: Project is vulnerable to: GHSA-446m-mv8f-q348
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-jv35-xqg7-f92r
Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472
Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
Warn: Project is vulnerable to: GHSA-v2p6-4mp7-3r9v
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.7

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to grunt-handlebars-layouts

Other packages similar to grunt-handlebars-layouts

grunt-handlebars-layouts

Installations

Developer Guide

No

CommonJS

>= 0.8.0

6.9.2

3.10.9

Pull Requests

0

7

1

6

Issues

1

9

8

Releases

Languages

Developer

thierryc

Download Statistics

GitHub Statistics

Bundle Size

572.00 B

345.00 B

Maintainers

Package Meta Information

Total Downloads

29,307

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Grunt Handlebars Layouts

Resources

About

Getting Started

Documentation

Optional Configuration Properties

Special Var In Context

Template example

Layout example

Partial example

Custom Helper example

MD5 Helper (inspired by handlebars-md5)

Foo and bar Helpers

Handlebars Markdown Helper

npm Helpers

Tested Helpers

suggested structure

A basic Handlebars-layouts site usually looks something like this:

grunt file example

Other interesting projects

Release History and Roadmap

License

Gulp version.

10

10

0

0

0

0

0

0

0

0

1.7

/10