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-sourcefrom 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 (default'inline')compress: enable/disable compression of inlined content (defaulttrue)fs: specifyfsimplementation (default is Node core'fs')handlers: specify custom handlers (default[]) [see custom handlers]ignore: disable inlining based ontag,type, and/orformat(default[])pretty: maintain leading whitespace whenoptions.compressisfalse(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)
Note: you can parse all script|link|img|object tags by setting options.attribute=false.
$ 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 processedfileContentstringextension: 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 wrappedcontentstring to replacematchtag: the tag string (script,link, etc)type: the content type based ontypemime-type attribute, ortag(jsforapplication/javascript,cssfortext/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 ofsourceobjects
-
next(err): a function to be called to advance to the next middleware function. Accepts an optionalerrorobject with behaviour determined byswallowErrorsflag (stops all processing iffalse, skips currentsourceiftrue)
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();
}
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent