- 热加载，本地服务器，文件监听，动态刷新
- 处理图片（优化图片，压缩）
- 处理scss（压缩合并，兼容前缀，base64，md5，雪碧图，px2rem高清方案）
- 处理js（模块化开发，压缩合并混淆）
- html动态更新css，js引用的md5码
项目链接：gulp-multipage
- 安装nodejs 本机采用v6.10.1版本;
- 全局安装gulp:npm install gulp -g
- git clone [email protected]:li2568261/gulp-multipage.git;
- 在当前目录下打开命令行（tips：按住shift点击鼠标右键可在菜单处快速打开）;
- 运行npm install 等待安装即可;
ps：未翻墙的同学建议采用cnpm进行npm install操作
- 资源目录src
- src的lib目录存放公用资源:
```
目前主要包含三个目录:
commonHtml存放页面公用部分
images存放相关图片
sprite存放合成雪碧图相关图片
js存放js组件，以及一些通用方法
scss存放相关公用样式、组件样式、sprite相关类样式
├─commonHtml
│ header.html
│ record-dialog.html
│
├─images
│ close.png
│ header-img.png
│ wait-img.gif
│
│
├─js
│ bscroll.min.js
│ common.js
│ jquery-1.9.1.min.js
│ lib.js
├─scss
│ a-sprite.scss
│ dialog.scss
│ index-sprite.scss
│ reset.scss
│ sprite-mixin.scss
│
└─sprite
```
- 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
```
参照/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]
}
}资源导出目录dist为文件资源导出目录，需要配合启动服务器进行处理分为两个文件夹，images和pages；images仅存放通用的图片资源。pages目录结构和资源目录一致
- 开发
在当前文件根目录下执行命令 npm run dev； 修改src相关文件，dist相关文件也会进行相应更新
- 发布
在当前文件根目录下执行命令 npm run pub，dist文件即为发布文件
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent