# yyl-inlinesource

> inline source plugin for html, css, js

Latest version **1.2.1** (published 2018-07-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install yyl-inlinesource
pnpm add yyl-inlinesource
yarn add yyl-inlinesource
bun add yyl-inlinesource
```

## 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.2.1 |
| Published | 2018-07-06 |
| First published | 2018-03-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 4 |
| Unpacked size | 24.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | jackness |
| Maintainers | jackness |
| Keywords | inline-source |

## Links

- npm: https://www.npmjs.com/package/yyl-inlinesource
- Repository: https://github.com/jackness1208/yyl-inlinesource
- Homepage: https://github.com/jackness1208/yyl-inlinesource#readme
- Issues: https://github.com/jackness1208/yyl-inlinesource/issues
- npm.io page: https://npm.io/package/yyl-inlinesource

## Dependencies (4)

- [yyl-util](https://npm.io/package/yyl-util.md) ~1.13.0
- [clean-css](https://npm.io/package/clean-css.md) ~4.1.11
- [uglify-js](https://npm.io/package/uglify-js.md) ~3.3.16
- [html-minifier](https://npm.io/package/html-minifier.md) ~3.5.12

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2018-07-06
- 1.2.0 — 2018-03-29
- 1.1.3 — 2018-03-22
- 1.1.2 — 2018-03-21
- 1.1.0 — 2018-03-20

## README

# yyl-inlinesouce
## 简介
* 为 html 文件提供 script, link inline 代码内联语法糖
* 为 html 文件中 style 标签 中的图片地址, img 标签 src 属性 提供 xx.png?__inline 图片 base64 转化语法糖
* 为 js 文件 提供 `__inline('./xx.tpl')` 模板文件内置 的语法糖
* 为 js 文件 提供 `__inline('./xx.png')` 图片 base64 转化语法糖

## 使用说明(相对路径)
### html, tpl 部分
#### script, link 标签内联写法

这是 link 标签 和 script 标签的 内联写法
```
<link rel="stylesheet" href="./css/demo.css" type="text/css" charset="utf-8" inline/>
<script src="./js/demo.js" inline></script>
```

#### img 标签 base 64 置换写法
这是 img标签 base64 的写法
```
<img src="./img/logo.png?__inline" />
```

构建完成后会变成base64格式
```
<img src="data:png;base64,......" />
```

### js 部分
#### js 文件tpl 内联写法
假设有 box.tpl 文件:
```
<span class="num">
  <span class='num-cnt'>123</span>
</span>
```

我们若在 js 这样调用
```
var tpl = __inline('../tpl/box.tpl');
```

则在构建完成后会变为:
```
var tpl = '<span class="num">\n  <span class=\'num-cnt\'>123</span>\n</span>\n';
```
#### js 文件img base64 写法

我们若在 js 这样调用
```
var avatar = __inline('../img/logo.png');
```

则在构建完成后会变为:
```
var avatar = 'data:png;base64,......';
```

### css 部分
#### 图片 base64 转换
我们若在 css 这样调用
```
body {
  background: url('../img/logo.png?__inline');
}
```

则在构建完成后会变为:
```
body {
  background: url('data:png;base64,......');
}
```

### node 调用方式
```
const inlinesource = require('yyl-inlinesource');
const srcPath = path.join(__dirname, './src/demo.html');
const distPath = path.join(__dirname, './dist/demo.html');
inlinesource({
  baseUrl: path.dirname(srcPath),
  type: 'html',
  content: fs.readFileSync(srcPath)
}).then((cnt) => {
  console.log(cnt);
  fs.writeFileSync(distPath, cnt);
});
```

```
const inlinesource = require('yyl-inlinesource');
const srcPath = path.join(__dirname, './src/js/demo.js');
const distPath = path.join(__dirname, './dist/demo.js');
inlinesource({
  baseUrl: path.dirname(srcPath),
  type: 'js',
  content: fs.readFileSync(srcPath)
}).then((cnt) => {
  console.log(cnt);
  fs.writeFileSync(distPath, cnt);
});
```

## 使用说明(绝对路径)
### html, tpl 部分
#### script, link 标签内联写法

这是 link 标签 和 script 标签的 内联写法
```
<link rel="stylesheet" href="/css/demo.css" type="text/css" charset="utf-8" inline/>
<script src="/js/demo.js" inline></script>
```

#### img 标签 base 64 置换写法
这是 img标签 base64 的写法
```
<img src="/img/logo.png?__inline" />
```

构建完成后会变成base64格式
```
<img src="data:png;base64,......" />
```

### js 部分
#### js 文件tpl 内联写法
假设有 box.tpl 文件:
```
<span class="num">
  <span class='num-cnt'>123</span>
</span>
```

我们若在 js 这样调用
```
var tpl = __inline('/tpl/box.tpl');
```

则在构建完成后会变为:
```
var tpl = '<span class="num">\n  <span class=\'num-cnt\'>123</span>\n</span>\n';
```
#### js 文件img base64 写法

我们若在 js 这样调用
```
var avatar = __inline('/img/logo.png');
```

则在构建完成后会变为:
```
var avatar = 'data:png;base64,......';
```

### css 部分
#### 图片 base64 转换
我们若在 css 这样调用
```
body {
  background: url('/img/logo.png?__inline');
}
```

则在构建完成后会变为:
```
body {
  background: url('data:png;base64,......');
}
```

### node 调用方式
```
const inlinesource = require('yyl-inlinesource');
const srcPath = path.join(__dirname, './src/demo.html');
const distPath = path.join(__dirname, './dist/demo.html');
inlinesource({
  baseUrl: path.dirname(srcPath),
  publishPath: '/html/',
  type: 'html',
  content: fs.readFileSync(srcPath)
}).then((cnt) => {
  console.log(cnt);
  fs.writeFileSync(distPath, cnt);
});
```

```
const inlinesource = require('yyl-inlinesource');
const srcPath = path.join(__dirname, './src/js/demo.js');
const distPath = path.join(__dirname, './dist/demo.js');
inlinesource({
  baseUrl: path.dirname(srcPath),
  publishPath: '/js/',
  type: 'js',
  content: fs.readFileSync(srcPath)
}).then((cnt) => {
  console.log(cnt);
  fs.writeFileSync(distPath, cnt);
});
```

## 参数说明
```
/**
 * @param  {Object}  op             参数
 * @param  {String}  op.baseUrl     文件当前路径
 * @param  {String}  op.publishPath 文件输出的路径
 * @param  {Buffer}  op.content     文件内容 
 * @param  {String}  op.type        文件类型, js|html
 * @param  {Boolean} op.minify      是否压缩
 * @return {Promise} Promise        返回一个 Promise 对象
 */
inlinesource(op)
```

## 历史版本
[这里](./history.md)

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