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 --> <!-- inline project/www/css/inlineStyle.css as <style> --> <!-- inline project/src/js/inlineScript.js as <script> --> <!-- inline project/www/images/inlineImage.png as base64 <img> --> <!-- inline project/www/images/inlineImage.svg as <svg> -->
var inline = fs = path = htmlpath = path; ;
inline.sync(htmlpath, [options]): same as inline
, but synchronously returns string of html content.
var inline = sync fs = path = htmlpath = path; var html = ;
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 { if sourcefileContent && !sourcecontent && sourcetype == 'js' sourcecontent = "Hey! I'm overriding the file's content!"; ; else ; };
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:
module { if sourcefileContent && !sourcecontent && sourcetype == 'js' // The `inline-compress` attribute automatically overrides the global flag if sourcecompress // compress content if sourcepropsfoo == 'foo' // foo content ; else ; };