html-resources

html-resources is a Node.js module which parses .html files and returns resources which are included inside (such as scripts, images, stylesheets, user-defined elements). Supports both Event-based and Promise-based syntax.

Installation

$ npm install html-resources

Usage

getResources(file, options);

import getResources, {Resources} from "html-resources";
 
const parser = getResources("./path/to/file.html", {
  cwd: process.cwd(),
  resources: [
    Resources.Scripts,
    Resources.Styles,
    Resources.Images
  ]
});

Promise-based syntax example

getResources("./path/to/file.html")
  .then(resources => …)
  .catch(exception => …);

You can also use await/async syntax:

const resources = await getResources("./path/to/file.html")

Event-based syntax example

const parser = getResources("./path/to/file.html");
 
parser.on("item", (type, resource, stream) => …);
parser.on("img", (resource, stream) => …);
parser.on("link", (resource, stream) =>  …);
parser.on("script", (resource, stream) => …);
// …
 
parser.on("error", message => …);
parser.on("end", resources => …);
parser.start();

Adding new resource definitions

You can specify which resources you want to parse in the resources parameter by passing an object with two properties: tag and attr. By default, it will look for:

• Resources.Scripts (<script src="…"></script>);
• Resources.Styles (<link href="…" />);
• Resources.Images (<img src="…" />);

import getResources, {Resources} from "html-resources";
 
const parser = getResources("./path/to/file.html", {
  resources: [
    // <custom-tag path="path/to/file" />
    { tag: "custom-tag", attr: "path" },
    // <shadow-item custom="path/to/file" />
    { tag: "shadow-item", attr: "custom" }
  ]
});
 
parser.on("custom-tag", (resource, stream) => …);
parser.on("shadow-item", (resource, stream) => …);

Saving resources

You can use html-resources to find, modify and re-save resources in a simple way.

parser.on("script", (resource, stream) => {
  console.log("Transforming script", resource.name);
 
  const dist = path.resolve("path/to/output/", resource.base);
  const write = fs.createWriteStream(dist, { flags: "w" });
 
  // You can use browserify, babelify and use other transformations here…
 
  stream.pipe(write);
});

Options

const parser = getResources(file [, options]);

file

HTML file to parse.

options.cwd

Current working directory. All the paths will be resolved to cwd. By default, it's set to process.cwd() but in most cases you want to set it manually to __dirname or pass an absolute path to file instead.

options.resources

An array containing all the resources definitions html-resources should look for. By default, it is set to Resources.Scripts, Resources.Styles, Resources.Images.

Tests

$ npm test