PostHTML Inline Assets
PostHTML Inline Assets lets you inline external scripts, styles, and images in HTML.
<!-- becomes -->
Usage
Add PostHTML Inline Assets to your project:
npm install posthtml-inline-assets --save-dev
Use PostHTML Inline Assets to process your HTML:
const posthtml = const posthtmlInlineAssets =
Gulp
Add Gulp PostHTML to your build tool:
npm install gulp-posthtml --save-dev
Use PostHTML Inline Assets in your Gulpfile:
const posthtml = ;const posthtmlInlineAssets = ; gulp;
Grunt
Add Grunt PostHTML to your build tool:
npm install grunt-posthtml --save-dev
Use PostHTML Inline Assets in your Gruntfile:
const posthtmlInlineAssets = ; grunt; grunt;
Options
cwd
The cwd
option specifies the working directory used by an HTML file, and it
is used to determine the relative location of assets. By default, the current
file directory is used, otherwise the current working directory is used.
const posthtmlInlineAssets = ; ;
<!-- resolves to /path/to/files/body.css -->
root
The root
option specifies the root directory used by an HTML file, and it
is used to determine the absolute location of assets. By default, the current
file directory is used, otherwise the current working directory is used.
const posthtmlInlineAssets = ; ;
<!-- resolves to /path/to/files/body.css --> <!-- resolves to the current working directory + body.css -->
errors
The errors
option specifies how transform errors should be handled,
whether those errors occur when a resolved asset cannot be read, or when
something goes wrong while an asset is being transformed. The default
behavior is to ignore
these errors, but they may also throw
an error,
or log a warning
.
const posthtmlInlineAssets = ; ;
transforms
The transforms
option specifies the transforms used to inline assets. New
transforms can be added by creating a child object with two functions;
resolve
and transform
.
resolve
The resolve
function is used to determine the path of an asset. It is passed
the current node, and it must return the path of the asset to be inlined. If it
does not return a string, the asset will not be transformed.
{ // if the node is a <foo> element then always return 'some/path' return nodetag === 'foo' && 'some/path'; }
transform
The transform
function is used to transform the asset being inlined. It is
passed the current node as well as an object containing the buffer
, the full
path
, and the mime
type (if available) of the asset. It may also return a
promise if an asynchronous transform is required.
{ // always inline the contents as a child of the node nodecontent = buffer ;}
Examples of changing or creating transforms
The default transforms can be modified to alter their functionality. For
instance, script.resolve
might be changed so that <script>
elements with a
type
attribute are ignored.
const posthtmlInlineAssets = ; ;
The transform could also be removed entirely by passing the transform a non-object.
const posthtmlInlineAssets = ; ;
New transforms are easy to add. For instance, a new pics
object might be
added to inline <picture>
elements with a src
attribute.
const posthtmlInlineAssets = ; ;
Be creative with your transforms. For instance, script.transform
might be
changed so that the contents of the script are also minified.
const posthtmlInlineAssets = ;const uglify = ; ;