hbsmon

1.0.4 • Public • Published

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 hbsmon

Usage

Get help

hbsmon -h

Get version

hbsmon -V

Monitor .hbs file, run script file with template basename

hbsmon template
  • Monitor changes of template.hbs file and run template.js script
  • 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.hbs file
  • 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.

  1. Create a template.hbs file: 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>
  1. Create a create.js file: this is the script you will invoke when template.hbs file 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);
  1. Install hbsmon globally, if not already installed.
npm i -g hbsmon

To check hbsmon is already installed, type hbsmon -V at the command prompt.

  1. Run hbsmon in a terminal
hbsmon template create
  1. In your IDE, open template.hbs and result.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.

Package Sidebar

Install

npm i hbsmon

Weekly Downloads

1

Version

1.0.4

License

ISC

Unpacked Size

6.02 kB

Total Files

5

Last publish

Collaborators

  • shytiger