# page-bundler

## 说明

用于打包简单的静态活动页面，支持特性：

- 为 html、css 中引用的图片添加 hash
- 将 js、css 内联到 html 中
- html 整体压缩（包括内联的 js、css）

## 使用

安装：

```
npm install -d page-bundler
```

在构建配置文件中（如 ```build.js```）添加：

```javascript
var path = require('path')
require('page-bundler').bundle({
  root: path.join(__dirname, 'src'),
  dist: path.join(__dirname, 'dist'),
  prefix: 'prefixe-to-output-file-',
  publicPath: 'http://static.com/', // 添加到图片路径前的地址前缀
  minify: true, // 输出 HTML 内容是否压缩（包括内联 CSS、JS）
  debug: false, // 是否输出日志
  pageHash: false // 输出 HTML 文件名称是否添加 hash
})
```

打包时执行：

```
node build
```

## 示例

源目录结构：

```
- a.jpg
- b.png
- c.gif
- page.css
- page.js
- page.html
```

page.css：

```css
#foo {
  background-image: url(a.jpg);
}
#bar {
  background-image: url(b.png);
}
```

page.html：

```html
<!-- ... -->
<link rel="stylesheet" href="page.css">
<!-- ... -->
<img src="c.gif">
<!-- ... -->
<script src="page.js"></script>
<!-- ... -->
```

构建配置文件 build.js：

```js
require('page-bundler').bundle({prefix: 'demo-2017-'})
```

通过 ```node build.js``` 进行打包后，dist 目录：

```
- demo-2017-a_e10472.jpg
- demo-2017-b_94d479.png
- demo-2017-c_e20d5a.gif
- demo-2017-page.html
```

其中 demo-2017-page.html：

```html
<!-- ... -->
<style>#foo {background-image:url(demo-2017-a_e10472.jpg)}#bar{background-image:url(demo-2017-b_94d479.png)}</style>
<!-- ... -->
<img src="demo-2017-c_e20d5a.gif">
<!-- ... -->
<script>!function(n,t){/*...*/}(window,document)</script>
<!-- ... -->
```