hbsmon
v1.0.4
Published
Monitor .hbs (Handlebar) file for changes and execute specified .js file
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.