1 | # html-bundler
|
2 |
|
3 | ### 面临的业务困境
|
4 |
|
5 | ### Why html-bundler
|
6 | 目前最流行的打包工具是webpack和gulp,都有着良好的生态和海量的用户,但是在我们使用的过程中发现了以下一些问题:
|
7 |
|
8 | - webpack的上手难度较高,配置和学习成本都很高
|
9 | - 所有资源都用webpack打包的情况下性能较差,比如改行样式等10秒这种非常常见
|
10 | - gulp虽然上手简单,但是插件众多,如何进行选择和最佳实践是一个大问题
|
11 | - 每做一个项目都需要修改构建程序.
|
12 |
|
13 | html-bundler的特点:
|
14 |
|
15 | - html-bundler以html为入口文件,自动寻找引入的资源文件进行构建处理,这对绝大多数项目是通用的.
|
16 | - 通过一个简单易理解的配置文件使得构建流程可配置。
|
17 | - 一些简单的项目可以直接只做简单的less => css转换,production模式进行压缩合并以及版本号处理即可
|
18 | - 复杂的项目则引入webpack对js进行模块化的处理,并暴露接口让用户自己修改webpack配置文件
|
19 | - 集成了一些优化和日志工具,提升构建的性能和可维护性
|
20 |
|
21 |
|
22 |
|
23 | ### Globle Mod
|
24 | 适用于一些只需要简单压缩合并的活动项目,或者一些demo页
|
25 |
|
26 | ```sh
|
27 | npm install html-bundler -g
|
28 | ```
|
29 |
|
30 | ```sh
|
31 | hb create project
|
32 | hb create project -w //add webpack.config.js local
|
33 | ```
|
34 |
|
35 |
|
36 | ```sh
|
37 | cd project && npm install
|
38 | ```
|
39 |
|
40 |
|
41 | ```sh
|
42 | hb dev -p 8080
|
43 | ```
|
44 |
|
45 |
|
46 | ```sh
|
47 | hb dest
|
48 | ```
|
49 |
|
50 | ### Local Mod
|
51 | 适用于正式项目
|
52 |
|
53 | ```sh
|
54 | cd your-project
|
55 | npm install html-bundler --save-dev
|
56 | ```
|
57 |
|
58 | 自动生成html-bundler.config.js
|
59 |
|
60 | ```sh
|
61 | npm install html-bundler -g
|
62 | hb init
|
63 | hb init -w //自动生成webpack.config.js
|
64 | ```
|
65 |
|
66 | create a js file (e.g: bundle.js)and write:
|
67 |
|
68 | ```js
|
69 | require('html-bundler')
|
70 |
|
71 | ```
|
72 |
|
73 | ```sh
|
74 | node bundle.js dev -p 8080
|
75 | ```
|
76 |
|
77 | ```sh
|
78 | node bundle.js dest
|
79 | ```
|
80 |
|
81 | ### 配置文件解析
|
82 | ```js
|
83 | /* eslint-disable */
|
84 | module.exports = {
|
85 | src: './src', //源代码所在路径
|
86 |
|
87 | entries: ['./src/html/**', './src/*.html'], //html入口文件
|
88 |
|
89 | ignore: ['./src/js/lib', './src/css/lib'], //不进行任何处理的路径
|
90 |
|
91 | imgFolder: './src/imgs', //图片目录
|
92 |
|
93 | moveList: ['./src/fonts', './src/a.js'], //需要平移的目录和文件
|
94 |
|
95 | devMod: { //开发模式
|
96 | output: './dev', //开发模式下打包后的输出位置
|
97 | minify: false, //是否最小化,如果开启,则js、css都会进行压缩
|
98 | minifyHTML: false, //是否压缩html,如果开启,则会对html文件进行压缩
|
99 | bundle: true, //是否使用webpack进行打包
|
100 | concat: false, //是否合并文件
|
101 | sourcemap: true, //是否进行sourcemap
|
102 | less: true, //是否进行less预处理
|
103 | inline: false, //是否把所有资源打成inline(目前不能和bundle配合使用)
|
104 | watchFolder: { //文件分类进行监听,这样修改js不会编译css,提高性能
|
105 | css: ['./src/css'],
|
106 | js: ['./src/js'],
|
107 | imgs: ['./src/imgs'],
|
108 | html: ['./src/html']
|
109 | },
|
110 | custom: { //自定义任务, 格式样例[{func: sass, opts: {logger: true}}, {func: task, opts: null }]
|
111 | js: [],
|
112 | css: [],
|
113 | imgs: [],
|
114 | html: []
|
115 | },
|
116 | server: true, //是否开启server,默认集成gulp-connect,如果配置为'bird',则使用bird。
|
117 | buildTarget: 'default' //buildTarget用于设置dist后的目录结构,如果选择default,则默认为css, js, html,如果是一个对象,则表示自定义,不过目前只支持按照文件类型进行分类。
|
118 | },
|
119 |
|
120 | destMod: { //生产模式,配置项和开发模式完全相同
|
121 | output: './dist',
|
122 | minify: true,
|
123 | minifyHTML: true,
|
124 | bundle: true,
|
125 | concat: true,
|
126 | less: true,
|
127 | inline: false,
|
128 | sourcemap: false,
|
129 | watchFolder: null,
|
130 | custom: {
|
131 | js: [],
|
132 | css: [],
|
133 | imgs: [],
|
134 | html: []
|
135 | },
|
136 | server: false,
|
137 | buildTarget: {
|
138 | js: './js/',
|
139 | css: './css/',
|
140 | imgs: './images/',
|
141 | html: './html/'
|
142 | },
|
143 | },
|
144 |
|
145 | rdMod: {
|
146 | //rd环境配置项,内容同上
|
147 | },
|
148 |
|
149 | qaMod: {
|
150 | //qa环境配置项,内容同上
|
151 | },
|
152 |
|
153 | birdConfig: { //bird 配置项
|
154 | basePath: "./dev",
|
155 | targetServer: {
|
156 | port: "8276",
|
157 | host: "your server host",
|
158 | headers: {
|
159 | cookie: ""
|
160 | }
|
161 | },
|
162 | ajaxOnly: false
|
163 | },
|
164 |
|
165 | serverConfig: { //gulp connect 配置项
|
166 | root: './dev'
|
167 | }
|
168 | }
|
169 |
|
170 | ```
|
171 |
|