模块化目录结构的搭建和案例说明

于是，先需要有一个合理的结构。

1、以上借鉴于http://zhuanlan.zhihu.com/TLA42/19691575

/.tmp        # 临时存放目录 （.ignore）
/public      # 生产代码 （.ignore）
/server      # 如果服务端也是 js 的话
/src         # 浏览器用的 js
/test        # 各种测试
/view        # 内容呈现相关
  /jade      # html 模版引擎
  /stylus    # css 预编译 换 less 或者 sass 随喜好
  /res       # 其他与 css 密切相关的 图片 字体 影像 等
gulpfile.js  # gulp 的入口文件
package.json # node 配置文件

• /view/jade 内的内容需要被编译成 html 文件，甚至是转换为 js。
  
• /view/stylus 内的内容会转换为一个或多个 css。
  
• /res 里直接 copy 更新到 public 即可，部分图片等需要处理什么的。
  
• /src 里的 js 也是需要打包压缩合并为一个或多个 js，在合并前需要跑 jshint 要跑单元测试等。
  

2、实战案例：

项目是基于 zepto , canjs 做为主要框架， 进行路由、模板渲染和数据绑定， reqiuriejs 作为 js 加载器，另取 GMU 部分UI组件。
- `index.html` 项目入口，引入主要的所有样式和主要的js
- `components` 为组件目录，存放组件的模板和对应的js
- `css` lesscss 源文件
- `img` 独立的图片
- `js` 存放公共的js，页面和组件的js请放到各自的目录中。
- `libs` 存放公共库的js
- `models` 存放api请求和数据处理
- `sprites` 需要合并的图标(执行 `gulp sprite` 之后，会将里面的所有图标合并到 `dist/img/sprite2x.png` 里面)
- `views` 每个页面对应的模板和js

glup常用到的构建插件列表