H5快速自动化开发模板、脚手架

工期约一个月内的小项目

监听文件更新 => 清除老版本 => 编译、转译 => 加hash版本号 => 多终端热更新

├─ dist    //打包目录
│  │
│  ├─ index.html
│  │
│  ├─ image
│  │
│  ├─ style
│  │
│  ├─ rev  //存放添加hash后缀的文件对照关系表
│  │
│  ├─ media
│  │
│  ├─ script
│  │
│  └─ lib
│
├─less    //less文件源码目录
│
├─script    //js文件源码目录
│
├─style    //less编译成css后存放的目录
│
└─index.html    //所有html文件均放置在根目录下

clone到本地后，命令行进入该目录，运行:

$ npm install

安装完所需依赖后

$ gulp

架设静态服务器，开始愉快的敲键盘吧~

tips:如果本地开发中需要使用ajax跨域调接口，将你本地nginx的配置文件替换为本项目中的nginx.conf文件,43-63行根据自己情况配置一下~,然后在gulpfile.js文件37行把代理选项打开~,最后启动nginx服务~(如果没有nginx请先自行下载)

1.所有html文件引用静态资源，均引用dist/目录下的，勿直接引用源码
2.新添加文件后需要重启gulp工作流，否则无法实时热更新
3.静态服务器的默认入口只能有一个（dist/下的index.html），可在gulpfile.js自行修改
4.图片、音视频等静态资源直接放在dist下对应文件夹里，该工具不提供图片、音视频压缩功能
5.开启nginx反向代理时由于路径问题可能会发生静态资源访问不到的情况，需将<base href='dist/'>调整为<base href='./'>
6.开启反向代理时,3001端口是提供热更新功能的端口,3003端口也可以正常访问页面,但是没有热更新功能

2018.6.6:less模板中新增了一些个人常用mixin方法

2018.10.9:更新了npm依赖包的版本

2018.11.16:增加了nginx反向代理解决跨域的功能