实现功能主要有
- 热加载，本地服务器，文件监听，动态刷新
- 处理图片（优化图片，压缩）
- 处理scss（压缩合并，兼容前缀，base64，md5，雪碧图，px2rem高清方案）
- 处理js（模块化开发，压缩合并混淆）
- html动态更新css，js引用的md5码
项目链接：gulp-multipage
使用方法
1. 依赖安装
- 安装nodejs 本机采用v6.10.1版本
- git clone git@github.com:li2568261/gulp-multipage.git
- 在当前目录下打开命令行（tips：按住shift点击鼠标右键可在菜单处快速打开）
- 运行npm install 等待安装即可
ps：未翻墙的同学建议采用cnpm进行npm install操作
2. 资源代码目录（如果不需要雪碧图功能，请在gulpfile.js文件中的task:pictureInit删除sprite任务，否则会报错）：
- 资源目录src
- src的lib目录存放公用资源:
```
目前主要包含三个目录:
commonHtml存放页面公用部分
images存放相关图片，下面得sprite存放合成雪碧图相关图片
js存放js组件，以及一些通用方法
scss存放相关公用样式、组件样式、sprite相关类样式
├─commonHtml
│ header.html
│ footer.html
├─images
│ └─sprite
│ ├─a
│ └─index
├─js
└─scss
```
- pages目录不同的页面新建不同的文件夹，里面都存在相同的目录结构：
```
在页面当前目录下直接存放html文件命名自取最终导出html文件名与初始命名相同；
在页面上的js已经scss文件夹分别存放相应的js和样式文件，命名无要求吗，导出文件名称格式为(页面名称).min.[js|css]；
├─a
│ │ a.html
│ ├─images
│ ├─js
│ │ a.js
│ └─scss
│ a.scss
└─index
│ index.html
├─images
├─js
│ index.js
└─scss
index.scss
```
3. 页面资源配置
参照/config/pagesConfig.js配置,建议遵守demo上的路径配置规则（ps未配置的页面不会进行资源整合处理）
//以下分别为js和样式文件的别名设置
var jsFileAlias = {
jq : path.join(libPath,"/js/jquery-1.9.1.min.js"),
libjs : path.join(libPath,"/js/lib.js")
}
var styleAlias = {
common : path.join(libPath,"/scss/base.scss"),
spriteMixin: path.join(libPath,"/scss/sprite-mixin.scss"),
aSprite : path.join(libPath,"/scss/a-sprite.scss"),
indexSprite : path.join(libPath,"/scss/index-sprite.scss")
}
//allConfig只需要添加需要额外加入的文件;"额外、额外、额外重要的事情说三遍"
//使用雪碧图请加入styleAlias.spriteMixin文件例index项下的import_style，"雪碧图+spriteMixin*3"
var allConfig = {
a:{
import_js:[jsFileAlias.jq,jsFileAlias.libjs],
import_style:[styleAlias.common]
},
index:{
import_js:[jsFileAlias.jq,jsFileAlias.libjs],
import_style:[styleAlias.spriteMixin,styleAlias.aSprite]
}
}
4. 资源导出目录
资源导出目录dist为文件资源导出目录，需要配合启动服务器进行处理分为两个文件夹，images和pages；images仅存放通用的图片资源。pages目录结构和资源目录一致
5. 代码的编写路径问题
根据代码结构，建议在编写代码的过程中页面独有资源采用相对路径，获取公用资源建议采用绝对路径，绝对路径根目录为dist目录
6. 运行模式
- 开发
在当前文件根目录下执行命令 npm run dev；
修改src相关文件，dist相关文件也会进行相应更新
- 发布
在当前文件根目录下执行命令 npm run pub，dist文件即为发布文件
