pack html to one file



This is a branch from inline-source!


I want a tool to build a html-suit to one file,so that it can move it easily.
At frist, I don't want to write it by myself, but when I were found a round in GITHUB,but nothing -- there is no one too I can use. Some of them have many bug ,and some of them have bug just has only one part of the function I want.
Then, I find a repo inline-source,it's almost perfect except for css's url. But the author don't have the plan to add it . He said:

I don't do any source transforms apart from minification, and anything else could be handled before passing content to inline-source. There is a real risk of turning this project into a mini-build system, so I think it's important to hold the line when there are other alternatives.

I respect and understand his practice. But I have to solve my problem.
And I had to change his code to make a mini-build system.


html-packer can take html's <script>, <link>, and <img>(including *.svgsources) tags into html-self.
More than that, it also can compress to minifiy it.


  1. Analysis of HTML tags
  2. Extract content from script and minify then replace it to tag's place
  3. Covert the image to a inline base64 source
  4. Extract content from script,and convert image to a inline base64 source then minify and replace it to html.
  5. minify html.


html-packer --compress false --root ./ file.html


cat build/index.html | html-packer --root build > build/bundle.html


inline(htmlpath, [options], callback(err, html)): asynchronously parse htmlpathcontent for tags containing an inlineattribute, and replace with (optionally compressed) file contents.

htmlpathcan be either a filepath ora string of html content.

Available optionsinclude:

  • attribute: attribute used to parse sources (default inline)
  • compress: enable/disable compression of inlined content (default true)
  • handlers: specify custom handlers (default []) [see custom handlers]
  • ignore: disable inlining based on tag, type, and/or format(default [])
  • pretty: maintain leading whitespace when options.compressis false(default false)
  • rootpath: directory path used for resolving inlineable paths (default process.cwd())
  • swallowErrors: enable/disable suppression of errors (default false)
  • svgAsImage: convert <img inline src="*.svg" />to <img>and not <svg>(default false)
$ npm install inline-source
<!-- located at project/src/html/index.html -->
<!DOCTYPE html>
  <!-- inline project/www/css/inlineStyle.css as <style> -->
  <link inline href="css/inlineStyle.css">
  <!-- inline project/src/js/inlineScript.js as <script> -->
  <script inline src="../js/inlineScript.js"></script>
  <!-- inline project/www/images/inlineImage.png as base64 <img> -->
  <img inline src="images/inlineImage.png" />
  <!-- inline project/www/images/inlineImage.svg as <svg> -->
  <img inline src="images/inlineImage.svg" />
var inline = require('inline-source')
  , fs = require('fs')
  , path = require('path')
  , htmlpath = path.resolve('project/src/html/index.html');

inline(htmlpath, {
  compress: true,
  rootpath: path.resolve('www'),
  // Skip all css types and png formats
  ignore: ['css', 'png']
}, function (err, html) {
  // Do something with html

inline.sync(htmlpath, [options]): same as inline, but synchronously returns string of html content.

var inline = require('inline-source').sync
  , fs = require('fs')
  , path = require('path')
  , htmlpath = path.resolve('project/src/html/index.html');

var html = inline(htmlpath, {
  compress: true,
  rootpath: path.resolve('www'),
  // Skip all script tags
  ignore: 'script'

Custom Handlers

Custom handlers are simple middleware-type functions that enable you to provide new, or override existing, inlining behaviour. All handlers have the following signature: function handler (source, context, next) {}

  • source: the current source object to act upon

    • attributes: the parsed tag attributes object
    • compress: the compress flag (may be overriden at the tag level via props)
    • content: the processed fileContentstring
    • extension: the file extension
    • fileContent: the loaded file content string
    • filepath: the fully qualified path string
    • format: the format string (jpg, gif, svg+xml, etc)
    • match: the matched html tag string, including closing tag if appropriate
    • props: the parsed namespaced attributes object (see props)
    • replace: the tag wrapped contentstring to replace match
    • tag: the tag string (script, link, etc)
    • type: the content type based on typemime-type attribute, or tag(jsfor application/javascript, cssfor text/css, etc)
  • context: the global context object storing all configuration options (attribute, compress, ignore, pretty, rootpath, swallowErrors, svgAsImage), in addtion to:

    • html: the html file's content string
    • htmlpath: the html file's path string
    • sources: the array of sourceobjects
  • next(err): a function to be called to advance to the next middleware function. Accepts an optional errorobject with behaviour determined by swallowErrorsflag (stops all processing if false, skips current sourceif true)

Custom handlers are inserted before the defaults, enabling overriding of default behaviour:

module.exports = function customjs (source, context, next) {
  if (source.fileContent
    && !source.content
    && (source.type == 'js')) {
      source.content = "Hey! I'm overriding the file's content!";
  } else {

In general, default file content processing will be skipped if source.contentis already set, and default wrapping of processed content will be skipped if source.replaceis already set.


Source propsare a subset of attributesthat are namespaced with the current global attribute('inline' by default), and allow declaratively passing data or settings to handlers:

<script inline inline-foo="foo" inline-compress src="../js/inlineScript.js"></script>
module.exports = function customjs (source, context, next) {
  if (source.fileContent
    && !source.content
    && (source.type == 'js')) {
      // The `inline-compress` attribute automatically overrides the global flag
      if (source.compress) {
        // compress content
      if ( == 'foo') {
        // foo content
  } else {



扫码加入 JavaScript 社区



欢迎加入 JavaScript 社区