Inline and compress tags that contain the inline
attribute. Supports <script>
, <link>
, and <img>
(including *.svg
sources) tags by default, and is easily extensible to handle others.
You can use inline-source-cli to run
inline-source
from the command line or NPM Scripts.
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
)fs
: specifyfs
implementation (default is Node corefs
)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 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.
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();
}
};