于是,先需要有一个合理的结构。
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常用到的构建插件列表