inline-html
Inline local assets referenced in an HTML document.
Last updated 2 years ago by panosoft .
MIT · Repository · Bugs · Original npm · Tarball
$ cnpm install inline-html 
SYNC missed versions from official npm registry.

inline-html

Inline local assets referenced in an HTML document.

npm version Travis

This library parses HTML, embeds the contents of local assets that are referenced within that HTML, and returns a new inlined HTML string.

The following HTML elements and CSS data types are inlined:

  • Scripts - The source path is read and inlined.

  • Linked CSS stylesheets - The stylesheet is read and inlined within a <style> element. Note that nested @import's are also inlined.

  • Linked LESS stylesheets - The LESS is compiled and the output is inlined within a <style> element. Note that @import's are also inlined.

  • Images - The source path is replaced with a datauri.

  • CSS url data types - The reference path is replaced with a datauri. These can be used in linked stylesheets, style elements, and element style attributes.

Also, inline-html calls can be statically evaluated and included in Browserify bundles using the html-inlinify transform.

Usage

Assuming ...

  • main.js

    var a = 1;
    
  • main.less

    div { background-image: url('path/to/file'); }
    
  • main.css

    @font-face { src: url('path/to/file'); }
    

Then ...

var co = require('co');
var inline = require('inline-html');

co(function * () {
	var html = `
		<script src="main.js"></script>
		<link rel="stylesheet" href="main.css"/>
		<link rel="stylesheet/less" href="main.less"/>
		<style> div { background-image: url('path/to/file'); } </style>
		<div style="background-image: url('path/to/file');"></div>
		<img src="path/to/file"/>
	`;
	html = yield inline.html(html);
	console.log(html);
	/**
		<script> var a = 1; </script>
		<style> @font-face { src: url('data:...'); } </style>
		<style> div { background-image: url('data:...'); } </style>
		<style> div { background-image: url('data:...'); } </style>
		<div style="background-image: url('data:...');"></div>
		<img src="data:..."/>
	 */
});

Installation

npm install inline-html

API


inline.html ( html [, options] )

Parses an HTML string and embeds referenced local assets into the HTML.

Returns a Promise that is fulfilled with an html string or an instance of Results depending on the value of options.verbose.

Arguments

  • html - An HTML string to inline.

  • options

    • filename - The filename used to resolve relative paths. If this option is not provided, relative paths will be resolved relative to the process's current working directory.
    • less - An object containing LESS options to pass to the less compiler. Defaults to {}.
    • verbose - A boolean that determines the promises fulfillment value. Supported values are:
      • true: An instance of Results.
      • false: An html string. (Default)

Example

co(function * () {
	var html = yield inline.html(`<img src="test.png">`);
	console.log(html); // <img src="data:...">
});

inline.file ( filename [, options] )

Reads an HTML file and embeds referenced local assets into the HTML.

Returns a Promise that is fulfilled with an html string or an instance of Results depending on the value of options.verbose.

Arguments

  • html - A filename of an HTML file to inline. Relative file paths are resolved relative to the filename's directory.

  • options

    • less - An object containing LESS options to pass to the less compiler. Defaults to {}.
    • verbose - A boolean that determines the promises fulfillment value. Supported values are:
      • true: An instance of Results.
      • false: An html string. (Default)

Example

co(function * () {
	html = yield inline.file(`index.html`);
	console.log(html); // <img src="data:...">
});

Results

The Promise returned by these functions is optionally fulfilled with a results object that has the following properties:

  • html - The inlined html
  • files - An array of filenames for the local assets that were inlined.
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 17
Dependencies (12)
Dev Dependencies (3)
Dependents (3)

Copyright 2014 - 2017 © taobao.org |