# inliner

> Utility to inline images, CSS and JavaScript for a web page - useful for mobile sites

Latest version **1.13.1** (published 2017-11-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install inliner
pnpm add inliner
yarn add inliner
bun add inliner
```

Provides the command `inliner`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.13.1 |
| Published | 2017-11-28 |
| First published | 2011-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 19 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1117 |
| Author | Remy Sharp |
| Maintainers | remy |
| Keywords | mobile, inline, production, build, minify |

## Links

- npm: https://www.npmjs.com/package/inliner
- Repository: https://github.com/remy/inliner
- Homepage: http://github.com/remy/inliner
- Issues: https://github.com/remy/inliner/issues
- npm.io page: https://npm.io/package/inliner

## Dependencies (19)

- [mime](https://npm.io/package/mime.md) ^1.3.4
- [svgo](https://npm.io/package/svgo.md) ^0.6.6
- [chalk](https://npm.io/package/chalk.md) ^1.1.3
- [debug](https://npm.io/package/debug.md) ^2.2.0
- [charset](https://npm.io/package/charset.md) ^1.0.0
- [cheerio](https://npm.io/package/cheerio.md) ^0.19.0
- [request](https://npm.io/package/request.md) ^2.74.0
- [then-fs](https://npm.io/package/then-fs.md) ^2.0.0
- [minimist](https://npm.io/package/minimist.md) ^1.1.3
- [jschardet](https://npm.io/package/jschardet.md) ^1.3.0
- [uglify-js](https://npm.io/package/uglify-js.md) ^2.8.0
- [iconv-lite](https://npm.io/package/iconv-lite.md) ^0.4.11
- [ansi-styles](https://npm.io/package/ansi-styles.md) ^2.2.1
- [es6-promise](https://npm.io/package/es6-promise.md) ^2.3.0
- [ansi-escapes](https://npm.io/package/ansi-escapes.md) ^1.4.0
- [lodash.assign](https://npm.io/package/lodash.assign.md) ^3.2.0
- [lodash.foreach](https://npm.io/package/lodash.foreach.md) ^3.0.3
- [lodash.defaults](https://npm.io/package/lodash.defaults.md) ^3.1.2
- [update-notifier](https://npm.io/package/update-notifier.md) ^0.5.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.13.1 (latest) — 2017-11-28
- 1.13.0 — 2017-11-21
- 1.12.5 — 2017-09-04
- 1.12.4 — 2017-08-25
- 1.12.3 — 2017-06-25
- 1.12.2 — 2017-05-20
- 1.12.1 — 2017-04-05
- 1.12.0 — 2017-04-05
- 1.11.0 — 2017-03-28
- 1.10.2 — 2017-02-28
- 1.10.1 — 2016-12-31
- 1.10.0 — 2016-12-31
- 1.9.5 — 2016-08-10
- 1.9.4 — 2016-07-31
- 1.9.3 — 2016-07-31
- … 52 more at https://npm.io/package/inliner/versions

## README

# Inliner

Turns your web page to a single HTML file with everything inlined - perfect for appcache manifests on mobile devices that you want to reduce those http requests.

[![Build Status](https://travis-ci.org/remy/inliner.svg)](https://travis-ci.org/remy/inliner)

## What it does

- Get a list of all the assets required to drive the page: CSS, JavaScript, images, videos and images used in CSS
- Minify JavaScript (via [uglify-js](https://github.com/mishoo/UglifyJS "mishoo/UglifyJS - GitHub"))
- Strips white from CSS
- Base64 encode images and videos
- Puts everything back together as a single HTML file with a simplfied doctype

## Installation

Install the `inliner` utility via [npm](http://npmjs.org):

    $ npm install -g inliner

## Usage

If you have either installed via npm or put the inliner bin directory in your path, then you can use inliner via the command line as per:

    inliner http://remysharp.com

This will output the inlined markup with default options. You can see more options on how to disable compression or how not to base64 encode images using the help:

    inliner --help

To use inline inside your own script:

    var Inliner = require('inliner');

    new Inliner('http://remysharp.com', function (error, html) {
      // compressed and inlined HTML page
      console.log(html);
    });

Or:

    var inliner = new Inliner('http://remysharp.com');

    inliner.on('progress', function (event) {
      console.error(event);
    }).on('end', function (html) {
      // compressed and inlined HTML page
      console.log(html);
    });

Once you've inlined the crap out of the page, you can optionally configure a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) to add advanced caching and offline functionality.

## Support

- Collapses all white space in HTML (except inside `<pre>` elements)
- Strips all HTML comments
- Pulls JavaScript and CSS inline to HTML
- Compresses JavaScript via uglify (if not compressed already)
- Converts all images and videos to based64 data urls, inline images, video poster images and CSS images
- Imports all @import rules from CSS (recusively)
- Applies media query rules (for print, tv, etc media types)
- Leaves conditional comments in place
- If JavaScript can't be imported (or is Google Analytics), source is not put inline

## Limitations / Caveats

- Whitespace compression might get a little heavy handed - all whitespace is collapsed from `n` spaces to 1 space.

## Filing issues & PRs

Please see the [contributing](https://github.com/remy/inliner/blob/master/CONTRIBUTING.md) for guidelines.

---
_Source: https://npm.io/package/inliner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._