Skip to content
Parses HTML files and extracts included resources (scripts, stylesheets, images, etc.). Supports both Event-based and Promise-based syntax.
JavaScript HTML CSS
Branch: development
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
test
.babelrc
.editorconfig
.eslintignore
.eslintrc.json
.flowconfig
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json

README.md

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
You can’t perform that action at this time.