# gulp-h5epacker

> 移动H5页面打包工具，可以根据描述将资源打包进html，替换资源为全局资源包CDN地址，减少请求数量

Latest version **0.1.1** (published 2017-05-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install gulp-h5epacker
pnpm add gulp-h5epacker
yarn add gulp-h5epacker
bun add gulp-h5epacker
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2017-05-10 |
| First published | 2017-05-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 (+9 in 4 direct dependencies) |
| Install scripts | no |
| Author | linevers |
| Maintainers | linevers |
| Keywords | gulp, html5, 页面资源打包进html页面 |

## Links

- npm: https://www.npmjs.com/package/gulp-h5epacker
- npm.io page: https://npm.io/package/gulp-h5epacker

## Dependencies (8)

- [lodash](https://npm.io/package/lodash.md) ~3.10.1
- [cheerio](https://npm.io/package/cheerio.md) ~0.19.0
- [request](https://npm.io/package/request.md) ^2.67.0
- [through2](https://npm.io/package/through2.md) ~2.0.0
- [clean-css](https://npm.io/package/clean-css.md) ~3.3.7
- [gulp-util](https://npm.io/package/gulp-util.md) ~3.0.6
- [uglify-js](https://npm.io/package/uglify-js.md) ~2.4.24
- [base64-img](https://npm.io/package/base64-img.md) ~1.0.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2017-05-10
- 0.1.0 — 2017-05-10

## README

# 版权申明

版权声明：本插件源码fork自filow的gulp_h5packer项目，版权归filow所有，本人修改了少量的bug并发布来便于本团队使用。

为了减少移动端H5页面的请求数量，往往会在发布前将页面依赖的JS, CSS文件嵌入html中，如果一些资源有全局资源包的支持，也会将其替换为CDN地址。

本插件可以根据link, script, img标签中的标记，选择将文件内容嵌入或者替换为CDN地址。

## 功能
2.可以将外联js和CSS的压缩并且转换注入到内联标签里面，能够通过配置进行替换html link标签

3.可以支持网络文件的嵌入和BASE64


## 用法

首先，在待处理的html文件中加入标记。标记共有三种：

### 内容替换标记

```html
<link rel="stylesheet" type="text/css" href="something.css" data-replace="true">
<script src="something.js" data-replace="true"></script>
```

这样会读取资源文件，把内容嵌入在标签的位置。script标签会删去src和data-replace属性，并在标签内嵌入内容。link标签会在后面产生一个style节点，并嵌入内容。标签本身会被删除。

目前插件会自动压缩css和js文件，未来可以通过配置文件取消这一功能。

### 资源URL替换标记

```html
<link rel="stylesheet" type="text/css" href="local/amui.css" data-replace="amui">
<script src="zepto.js" data-replace="static-zepto"></script>
```

在data-replace中写入"static-全局资源包名称"，即可替换为相应的地址。

该功能由于目前脱离了支付宝环境，暂时没有默认值，请在初始化参数中传入：
```js
{
  staticUrl: {
    name: 'http://url.to.path'
  }
}

```

### 图片Base64转化标记
```html
<img src="fake.png" data-replace="base64">
```
注意： 目前Base64转码不考虑文件大小因素，请不要在大图片上加这个标记！

## 引用
设置完HTML后，在gulpfile.js中引用：
```js
gulp.task('pack', function (){
  var replacer = require('gulp-h5epacker');
  gulp.src('./build/*/*.html')
    .pipe(replacer())
    .pipe(gulp.dest('./pack'));
});
```
也可以不设置html标签属性data-replace，通过配置替换
root:是css 文件素在的目录
htmlTag: 要填充替换的tag
```js
gulp.task('pack', function (){
  var replacer = require('gulp-h5epacker');
  gulp.src('./build/*/*.html')
    .pipe(replacer({root: './', htmlTag: 'link', replaceAttr: true}))
    .pipe(gulp.dest('./pack'));
});
```
## Todo
1. 增加配置选项

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