inline-resource
A node utility to inline everything you want to inline, including image, css, html, etc.
Features
-
Support inline
image
referred byimg
html element or cssurl
usingbase64
data-uri -
Support inline
svg
files referred by css or html using svg source file orbase64
data-uri -
Support inline
font
files usingbase64
data-uri -
Support inline
css
file referred bylink
element or@import
rule -
Support inline
html
file referred bylink
element -
Support inline
js
file referred byscript
element ordocument.write
statement -
Support custom inline method using
__inline(path)
in script or html -
The script and style element content defined in html can also be processed
-
The inline is processed recursively and support inline all local assets into a single file or specify which asset need to been processed inline
-
The inline file support compress option
-
You can custom your inline processor or inline task if existed cannot satisfy
How to use
Install
npm install inline-resource --save
A simple example
var inliner = ;var result = inliner;
Using with web server
-
location: /\.js/handler:{var req = contextrequest;var path = reqpathname;var result = inliner;contextcontent = result0data;}location: /\.php/handler:{var req = contextrequest;var path = reqpathname;var result = inliner;contextcontent = result0data;}
Options
-
root -
string
optional
the root directory to process, by defautl using current working directory -
output -
string
optional
the output directory, by default, none will output -
files -
Array
the file to been processed inline, the file pattern using minimatch, the regexp or file object is supported, the file object structure:{data: string, path: string}
, thepath
is relative toroot
-
fileMap -
Object
optional
the all read-ahead file collection, the key ispath
relative toroot
, the value is file data -
processor -
Object
optional
custom the processor type using, e.g., {mustache: 'html'} -
inlinePathResolver -
Function
optional
resolve the inline file path{var path = path;return path;// var dir;// if (/\W+views\//.test(file.path)) {// dir = 'example';// }// you can specify the directory that the path relative to// return {path: path, dir: dir};} -
inlineAll -
boolean
optional
whether inline all local resources referred by the processed file, by defaultfalse
, specify which resource need to be inline manually using url inline query param. Notice if settingtrue
, you should manuall specify which resource type you want to inline all using the following resource type option, e.g., settingcss: true
orcss: {/*options*/}
, it will inline all css files. -
inlineParamName -
string
optional
by default_inline
, specify the inline resource like:<img src="a/b.jpg?_inline"> <!-- the value of the inline param can used to specify the relative directory of the inline path --> <img src="a/b.jpg?_inline=example">
-
ignoreCompressFiles -
Array<string|RegExp>
optional
the files to been ignored when enable compress option -
img -
boolean|Object
optional
whether enable image inline process using base64 encode, by defaulttrue
ifinlineAll
is nottrue
img:// the image file size less than or equal 1024 byte will be inlinedlimit: 1024 -
font -
boolean|Object
optional
whether enable font inline process using base64 encode, by defaulttrue
ifinlineAll
is nottrue
font:// the font file file size less than or equal 1024 byte will be inlinedlimit: 1024 -
svg -
boolean|Object
optional
whether enable svg inline process using base64 encode or svg source, by defaulttrue
ifinlineAll
is nottrue
svg:// by default, using base64 encodeuseSource: false// the svg file size less than or equal 1024 byte will be inlinedlimit: 1024// whether compress svg source file when inline svg source, by default false// if enabled, please make sure `svgo@^1.0.0` is installed in global or working dircompress: false -
css -
boolean|Object
optional
whether enable css inline process, by defaulttrue
ifinlineAll
is nottrue
css:// whether rebase the file path referred by inline css file, by default falserebase: falserebase:absolute: true // rebase as absolute path{ // ignore url rebasereturn false;}{ // custom rebase logicvar isLocalPath = this;var absPath = this;var rebasePath = this;return url;}// whether compress css source file, by default false// if enabled, please make sure `clean-css@4` is installed in global or working dircompress: false -
js -
boolean|Object
optional
whether enable js inline process, by defaulttrue
ifinlineAll
is nottrue
js:// whether using the custom inline method, by default true// e.g., var tpl = '__inline("./a.tpl")'; // output: var tpl = '<inline tpl content>'// '__inline("./a.js")' // output: <inline js file content>custom: false// whether compress js source file, by default false// if enabled, please make sure `uglify-js@3` is installed in global or working dircompress: false -
html -
boolean|Object
optional
whether enable html inline process, by defaulttrue
ifinlineAll
is nottrue
html:// whether compress html source file, by default falsecompress: false
API
- addInlineTaskFor(type, tasks) - add custom inline task for the specified processor type
var inliner = ;inliner;
- registerInlineProcessor(type, processor) - register inline processor for custom file type
inliner;