h5Express脚手架 Power By AngularJs

作者: 顾航(rexhang)

时间: 2015.06.20

==代码部分仅供参考==

1.项目简述

• 搭建Nond.js环境，安装下载关于gulp下相关插件包到本地目录。

• 构建前端页面目录结构，规划前端架构。

• 拆分前端静态页面，划分出视图层，控制层以及数据层。

• 编写关于应用app的入口文件，构建路由，分发任务到各控制器、数据层。

• 分别编写控制器、以及数据模型的数据交互，设计API接口与后台数据的调用。

• 编写DOM操作相关的用户交互效果。

• 编写Gulp自动化前端架构，处理前端的优化（web服务器，ES6编译，代码和图片的压缩，代码合并，代码混淆，语法检测，浏览器自动更新，单元测试，整体测试等）功能性代码。

• 使用webpack整合代码合并文件。

2.环境搭建 基于Node.js下的web运行环境

3.目录划分

目录结构

• rex_cms(项目名称) --------------------------- 项目开发目录
  • node_modules --------------------------------- Node模块
  • src ------------------------------------------ 应用代码目录
    • api ------------------------------------------ api接口目录
    • assets --------------------------------------- web图标资源
    • bower ---------------------------------------- bower下载的文件目录
    • css ------------------------------------------ css样式文件目录
    • h5Static ------------------------------------- 单个h5页面目录
    • img ------------------------------------------ 图片文件目录
    • js ------------------------------------------- js文件
    • lib ------------------------------------------ js插件
    • ng-js ---------------------------------------- angularjs资源
    • scss ----------------------------------------- scss样式文件目录
    • template ------------------------------------- 路由模板
    • webpack_build -------------------------------- webpack构建的文件目录
    • app.js --------------------------------------- 路由配置文件
    • directive.app.js ----------------------------- 自定义指令
    • factory.app.js ------------------------------- 工厂服务
    • index.html ----------------------------------- 应用入口文件
  • .bowerrc ------------------------------------- Bower目录配置文件
  • bower.json ----------------------------------- Bower下载的文件配置
  • entry.js ------------------------------------- Webpack入口文件配置模板
  • gulpfile.js ---------------------------------- Gulp配置文件
  • package.json --------------------------------- Node插件配置文件
  • README.md ------------------------------------ 开发说明
  • runlocal.bat --------------------------------- windows运行脚本
  • runwatch.bat --------------------------------- windows运行脚本
  • webpack.config.js ---------------------------- Webpack配置文件

4.代码编写顺序

1. 通过cnpm install 安装相关包(注意：之前请先npm install -g cnpm –registry=https://registry.npm.taobao.org | npm install --global gulp | npm install webpack -g)

2. 编写路由配置文件，以分发到各个控制器、数据模型中处理事务。

3. 编写相关的控制器，抽离出service、directive服务。

4. 编写相关指令文件，控制DOM操作元素。

5. 编写其它相关文件。

6. 编写gulp测试文件gulpfile.js、编写webpack测试文件webpack.config.js用于对项目的架构，应用于正式环境的部署文面。

7. 编写单元测试文件与用户真实测试环境文件。