page-bundler

说明

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

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

使用

安装：

npm install -d page-bundler

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

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：

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

page.html：

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

构建配置文件 build.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：

<!-- ... -->
<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>
<!-- ... -->