Skip to content
This repository has been archived by the owner on May 4, 2020. It is now read-only.
/ html-resources Public archive

Parses HTML files and extracts included resources (scripts, stylesheets, images, etc.). Supports both Event-based and Promise-based syntax.

License

Notifications You must be signed in to change notification settings

Bartozzz/html-resources

Repository files navigation

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).

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]
});

Basic 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.parse();

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.

options.autostart

Whether to automatically start to parse the HTML file or wait for manual .parse() execution.

Tests

$ npm test

About

Parses HTML files and extracts included resources (scripts, stylesheets, images, etc.). Supports both Event-based and Promise-based syntax.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published