npm

Does your artifact manager get in the way? Join us on Oct. 8 at 10am PT, to discuss how npm can help.Sign up »

html-resources

1.1.2 • Public • Published

html-resources

Greenkeeper badge Build Status npm version npm downloads

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

install

npm i html-resources

Downloadsweekly downloads

5

version

1.1.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability