# PostHTML Inline Assets [

](posthtml) [ npm version

](https://www.npmjs.com/package/posthtml-inline-assets) [ build status

](https://travis-ci.org/jonathantneal/posthtml-inline-assets?branch=master) [

](https://gitter.im/posthtml/posthtml) [PostHTML Inline Assets] lets you inline external scripts, styles, and images in HTML. ```html ``` ## Usage Add **PostHTML Inline Assets** to your project: ```bash npm install posthtml-inline-assets --save-dev ``` Use **PostHTML Inline Assets** to process your HTML: ```js const posthtml = require('posthtml') const posthtmlInlineAssets = require('posthtml-inline-assets') posthtml([ posthtmlInlineAssets(/* pluginOptions */) ]).process(YOUR_HTML /*, processOptions */) ``` #### Gulp Add [Gulp PostHTML] to your build tool: ```bash npm install gulp-posthtml --save-dev ``` Use [PostHTML Inline Assets] in your Gulpfile: ```js const posthtml = require('gulp-posthtml'); const posthtmlInlineAssets = require('posthtml-inline-assets'); gulp.task('css', () => gulp.src('./src/*.css').pipe( posthtml([ posthtmlInlineAssets() ]) ).pipe( gulp.dest('.') )); ``` #### Grunt Add [Grunt PostHTML] to your build tool: ```bash npm install grunt-posthtml --save-dev ``` Use [PostHTML Inline Assets] in your Gruntfile: ```js const posthtmlInlineAssets = require('posthtml-inline-assets'); grunt.loadNpmTasks('grunt-posthtml'); grunt.initConfig({ posthtml: { options: { use: [ posthtmlInlineAssets() ] }, dist: { src: '*.css' } } }); ``` ## 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. ```js const posthtmlInlineAssets = require('posthtml-inline-assets'); posthtmlInlineAssets({ cwd: '/path/to/files' }); ``` ```html ``` ### 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. ```js const posthtmlInlineAssets = require('posthtml-inline-assets'); posthtmlInlineAssets({ root: '/path/to/files' }); ``` ```html ``` ### 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`. ```js const posthtmlInlineAssets = require('posthtml-inline-assets'); posthtmlInlineAssets({ // throw an error whenever a resolved asset fails to inline errors: 'throw' // the options are to 'throw', 'warn', or 'ignore' errors }); ``` ### 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. ```js function resolve(node) { // if the node is a element then always return 'some/path' return node.tag === '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. ```js function transform(node, { buffer, path, mime }) { // always inline the contents as a child of the node node.content = [ buffer.toString('utf8') ]; } ``` ### 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 `

posthtml-inline-assets

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past