hbsmon
v1.0.4
Published
Monitor .hbs (Handlebar) file for changes and execute specified .js file
Downloads
1
Maintainers
shytigerReadme
hbsmon
Monitor .hbs (Handlebar) file for changes and execute specified .js
Installation
Install the package globally so you can use the hbsmon CLI command:
npm i -g hbsmonUsage
Get help
hbsmon -hGet version
hbsmon -VMonitor .hbs file, run script file with template basename
hbsmon template- Monitor changes of
template.hbsfile and runtemplate.jsscript - Template default extension:
.hbs - Default JavaScript default extension
.js - Default Javascript filename: template file basename
Monitor .hbs file, run specified script
hbsmon template create-page- Monitor changes of
template.hbsfile - Template default extension:
.hbs - Default JavaScript default extension
.js - Run javacript file:
create-page.js
Quick demo
This example shows how you to monitor changes to a .hbs template file and run a script when the template file changes.
- Create a
template.hbsfile: this is the file template file you will monitor for changes
<body>
<ul>
{{#each items as |item|}}
<li>
<a href="{{{item.url}}}" title="">{{{item.text}}}</a>
</li>
{{/each}}
</ul>
</body>- Create a
create.jsfile: this is the script you will invoke whentemplate.hbsfile changes.
const Handlebars = require('handlebars')
const fs = require('fs')
function render(source, data = {}) {
let template = Handlebars.compile(source);
return template(data);
}
let items = "First Second".split(/\s+/).map((label, idx) => {
return {
text: `${label} ${idx+1}`,
url: `#`,
}
})
let source = fs.readFileSync(`template.hbs`, "utf-8")
let output = render(source, {items: items})
fs.writeFileSync('result.html', output, "utf-8");
console.log(source);
- Install
hbsmonglobally, if not already installed.
npm i -g hbsmonTo check hbsmon is already installed, type hbsmon -V at the command prompt.
- Run
hbsmonin a terminal
hbsmon template create- In your IDE, open
template.hbsandresult.html
As you type changes to your template, the result.html also changes. When hbsmon detects a change in the .hbs file, it invokes the change.js script, which uses the .hbs file to create the result.html file.