Monitor .hbs (Handlebar) file for changes and execute specified .js
Install the package globally so you can use the hbsmon CLI command:
npm i -g hbsmonhbsmon -hhbsmon -Vhbsmon template- Monitor changes of
template.hbsfile and runtemplate.jsscript - Template default extension:
.hbs - Default JavaScript default extension
.js - Default Javascript filename: template file basename
hbsmon template create-page
- Monitor changes of
template.hbsfile - Template default extension:
.hbs - Default JavaScript default extension
.js - Run javacript file:
create-page.js
This example shows you how to monitor changes to a .hbs template file and run a script when the template file changes.
- You will create an
.hbstemplate file to monitor and a Javascript.jsfile to execute when the template file changes. In this example, the javascript createsresult.html-- it uses the template. - Next, you will invoke
hbsmonCLI command with template and javascript filenames as arguments. - Next, you open the template and
result.htmlin your IDE. - Edit the template file, and notice the
result.htmlfile -- it has the update template content.
Follow this steps:
- Create a
template.hbsfile: this is the file template file you will monitor for changes
- 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.