主要操作包含:
CSS 前缀补全, LESS/SASS 编译, CSS 压缩, JS 合并压缩 ,图片压缩, 部署发布
流程分解
主要分为
开发过程
和
部署过程
开发过程
要求每一次编辑都能在页面上即时相应
部署过程
- CSS Autoprefixer
- Less/Sass => CSS
- CSS 压缩合并
- CSS Sprite
- Retina @2x & @3x 自动生成适配
- imagemin 图片压缩
- JS 合并压缩
项目目录结构
project //项目目录
|____dev //开发目录
| |____html
| |____images
| |____scripts
| |____slice //合成的雪碧图
| |____styles
|____dist //生产目录
| |____html
| |____images
| |____scripts
| |____sprite //仅从 src 复制
| |____styles
|____gulpfile.js
|____src //源文件目录
| |____html
| |____images
| |____scripts
| |____slice //雪碧图素材
| |____styles
