Installations
npm install grunt-handlebars-layoutsDeveloper Guide
Typescript
No
Module System
CommonJS
Min. Node Version
>= 0.8.0
Node Version
6.9.2
NPM Version
3.10.9
Score
44.6
Supply Chain
82.6
Quality
67.1
Maintenance
25
Vulnerability
95.7
License
Releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (81.46%)
HTML (18.54%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
thierryc
Download Statistics
Total Downloads
28,242
Last Day
7
Last Week
55
Last Month
347
Last Year
2,585
GitHub Statistics
MIT License
14 Stars
85 Commits
10 Forks
4 Watchers
3 Branches
3 Contributors
Updated on Jun 10, 2020
Maintainers
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
28,242
Last Day
-53.3%
7
Compared to previous day
Last Week
-36.8%
55
Compared to previous week
Last Month
81.7%
347
Compared to previous month
Last Year
51.5%
2,585
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
5
Peer Dependencies
1
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
- Handlebars templates
- Mustache
- Treehouse Blog, Handlebars.js Part 2: Partials and Helpers
- NetTuts+: An Introduction to Handlebars
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 helpersstrict: 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
{{slug __filename}}
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>© 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
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
Copyright © 2014 Thierry Charbonnel, contributors.
Released under the MIT license
Gulp version.
Soon. Help is welcome. (contact me)
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.txt:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.txt:0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 2/27 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 8 are checked with a SAST tool
Reason
66 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-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-02-10
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