html-packer v0.2.1
html-packer
intro
This is a branch from inline-source!
why
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
.
what
html-packer can take html's <script>
, <link>
, and <img>
(including *.svg
sources) tags into html-self.
More than that, it also can compress to minifiy it.
How
- Analysis of HTML tags
- Extract content from script and minify then replace it to tag's place
- Covert the image to a inline base64 source
- Extract content from script,and convert image to a inline base64 source then minify and replace it to html.
- minify html.
Cli
html-packer --compress false --root ./ file.html
or
cat build/index.html | html-packer --root build > build/bundle.html
Api
inline(htmlpath, options, callback(err, html)): asynchronously parse htmlpath
content for tags containing an inline
attribute, and replace with (optionally compressed) file contents.
htmlpath
can be either a filepath or a string of html content.
Available options
include:
attribute
: attribute used to parse sources (defaultinline
)compress
: enable/disable compression of inlined content (defaulttrue
)handlers
: specify custom handlers (default[]
) [see custom handlers]ignore
: disable inlining based ontag
,type
, and/orformat
(default[]
)pretty
: maintain leading whitespace whenoptions.compress
isfalse
(defaultfalse
)rootpath
: directory path used for resolving inlineable paths (defaultprocess.cwd()
)swallowErrors
: enable/disable suppression of errors (defaultfalse
)svgAsImage
: convert<img inline src="*.svg" />
to<img>
and not<svg>
(defaultfalse
)
$ npm install inline-source
<!-- located at project/src/html/index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- 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" />
</head>
</html>
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 uponattributes
: the parsed tag attributes objectcompress
: the compress flag (may be overriden at the tag level via props)content
: the processedfileContent
stringextension
: the file extensionfileContent
: the loaded file content stringfilepath
: the fully qualified path stringformat
: the format string (jpg
,gif
,svg+xml
, etc)match
: the matched html tag string, including closing tag if appropriateprops
: the parsed namespaced attributes object (see props)replace
: the tag wrappedcontent
string to replacematch
tag
: the tag string (script
,link
, etc)type
: the content type based ontype
mime-type attribute, ortag
(js
forapplication/javascript
,css
fortext/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 stringhtmlpath
: the html file's path stringsources
: the array ofsource
objects
next(err)
: a function to be called to advance to the next middleware function. Accepts an optionalerror
object with behaviour determined byswallowErrors
flag (stops all processing iffalse
, skips currentsource
iftrue
)
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!";
next();
} else {
next();
}
};
In general, default file content processing will be skipped if source.content
is already set, and default wrapping of processed content will be skipped if source.replace
is already set.
Props
Source props
are a subset of attributes
that 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 (source.props.foo == 'foo') {
// foo content
}
next();
} else {
next();
}
};