模块化目录结构的搭建和说明
2015-09-11 11:56
344 查看
于是,先需要有一个合理的结构。
1、以上借鉴于http://zhuanlan.zhihu.com/TLA42/19691575
/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常用到的构建插件列表
1、以上借鉴于http://zhuanlan.zhihu.com/TLA42/19691575
[code]/.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常用到的构建插件列表
相关文章推荐
- [MySQL FAQ]系列 — 从MyISAM转到InnoDB需要注意什么
- spring详解
- 文字中间划线
- su认证失败??? su root 输入命令后显示 "su:Authentication failure"
- 数据结构——队列,栈
- Android笔记之Activity生命周期实测
- [Android]device layout partitions introduction
- cf319.B. Modulo Sum(dp && 鸽巢原理 && 同余模)
- React 编码
- Java Calendar 类的时间操作
- java树状显示文件名
- String、StringBuffer、StringBuilder
- Redis数据过期策略探究
- play教程 routes文件的使用-第四课
- 接口
- php 接口,extends,implement,implements 作用及区别收集整理
- Spring STS 使用SVN插件时报 Failed to Load JavaHL Library 的错误
- win10正式版如何更换图标?
- MySQL之—checking for termcap functions library... configure: error: No curses/termcap library found解决
- php和bom头的冤仇 和 如何在linux下使用命令去掉bom头