- gulp 实现自动构建,将模板、js、css分开打包
- jade 快速构建HTML模板,支持js语法
- ES6 模块、类、箭头函数、promise、利用实例对象共享数据
- jQuery 使用事件绑定、服务端通信
功能模块 以 快频彩种(11选5) 为例
- 倒计时
- 玩法切换
- 计算金额
- 添加号码
- 投注支付
- 随机号码
- 奖金预测
- 状态更新
- 动态遗漏
- 安装所有依赖
## 根目录下
npm install
## server目录下
npm install
- 编译
## 根目录下
gulp --watch
- 打开浏览器 localhost:3999
.
└── app ------------------------------ 前端代码目录
├── css -------------------------- css目录
├── js --------------------------- 放置js的目录
│ ├── class -------------------- es6类 目录
│ │ ├── test.js -------------- 空的类文件
│ ├── index.js ----------------- 入口文件
├── views ------------------------ 放置模板的目录
│ ├── index.jade --------------- 放置入口的模板
│ ├── error.jade --------------- 放置错误的模板
└── server ---------------------------- 服务器目录
├── bin ---------------------------
│ ├── www ----------------------- 服务器脚本
├── node_modules ------------------ 依赖包
├── public ------------------------ 存放编译后的js和css
├── routes ------------------------
├── views ------------------------- 存放模板
│ ├── error.jade ---------------- 服务器脚本
│ ├── index.jade ---------------- 服务器脚本
├── app.js ------------------------ 入口文件
├── package.json ------------------ 项目配置
└── tasks ------------------------------ 构建工具目录
├── util --------------------------- 放置常用脚本
│ ├── args.js -------------------- 初始化的文件(命令行参数配置)
├── scripts.js --------------------- 构建脚本,对js的处理: es6编译 + js和压缩js拷贝到server/public/js目录下 + 热更新
├── pages.js ----------------------- 构建脚本,对模板的处理: 模板拷贝到server目录下 + 热更新
├── css.js ------------------------- 构建脚本,对css的处理: css拷贝到server/public/stylesheets目录下,不热更新
├── server.js ---------------------- 处理服务器相关构建的脚本: 当处于监听状态时,创建服务器 + 启动服务器 + 服务器下文件改动的热更新
├── browser.js --------------------- 当处于监听状态时,app下文件改动时,同步到server目录
├── clean.js ----------------------- 每次重新生成拷贝时,清空指定目录文件
├── build.js ----------------------- build命令后,按顺序相应执行脚本
├── default.js --------------------- gulp执行时有一个默认的动作:会去找default.js
└── package.json ----------------------- 项目配置
└── .babelrc --------------------------- babel编译工具的文件
└── gulpfile.babel.js ------------------ gulp配置文件(es6)(es6以下:gulpfile.js)
└── .gitignore ------------------------- git忽略文件
└── README.md --------------------------