Web重构搭建工程目录，即是合理分布项目静态资源。
目录和文件名，只能是英文、数字和-字符组成，名称不宜过长和生涩，不加排序前缀，干扰阅读和查找文件名，层级不宜过深，这样便于后期维护调整，交付后端程序清晰明了。
组织目录和文件，处理好两个点：一是设计模式框架中类型，二是业务功能；
页面型、内容型多页面项目
项目目录规划
- 移动Web端 → Project-H5
- 微信端 → Project-WeiXin
- 桌面Web端 → Project-PC
- Android端 → Project-Android
- AndroidTV端 → Project-AndroidTV
- iOS端 → Project-iOS
- Linux端 → Project-Linux
- UWP端 → Project-UWP
- WP端 → Project-WP
通用页面规划
- 通用列表页
- 通用详情页
- 通用评论页
- 通用图片列表页
- 通用图片详情页
- 通用视频列表页
- 通用视频详情页
栏目/频道页面规划
- 栏目-首页
- 栏目-列表页
- 栏目-详情页
- 栏目-其它业务操作页面
用户中心页面规划
例：采用Gulp打包、SCSS预处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| + project-a/
+ project-b/
+ project-c/
...
- project-x/
- dist/ (打包文件)
- css/
main.min.css
+ font/
+ img/
+ lib/
+ js/
index.html
about.html
archive.html
+ dev/ (开发预览，样式脚本都未合并或混合，方便调试)
- src/
+ font/ (Icon)
+ img/ (项目用图形图标)
- js/
+ common/ (内部编写公用模块脚本，打包成common.min.js单文件)
entry.js (入口文件，定义一个全局变量，项目所有脚本对象都挂在它名下，即类似声明一个命名空间，避免污染)
+ view/ (每个页面的脚本)
+ lib/ (第三方依赖，不可改动)
- page/ (页面，采用`gulp-file-include`从tpl引入模块)
index.html
about.html
archive.html
- scss/ (所有样式打包成main.min.css单文件)
+ component/ (组件类)
+ core/ (核心样式)
+ dependencies/ (第三方依赖)
+ mixins/ (混合器)
+ variables/ (全局样式变量)
_component.scss
_mixins.scss
_variables.scss
app.scss (全局样式)
- tpl/ (模块)
page-header.html
page-breadcrumb.html
page-footer.html
page-aside.html
page-meta.html
page-pendant.html
page-style.html
script-head.html
script-foot.html
site-topbar.html
site-footer.html
.gitignore (Gulp task 代码校验配置、Git 版本控制配置)
.babelrc
.csslintrc
.eslintignore
.eslintrc
.htmlhintrc
.jshintignore
.jshintrc
.scss-lint.yml
gulpfile.js (Gulp配置)
package.json (项目配置)
|
单页面：业务功能优先、类型其次的目录规划
一般使用设计模式框架 CLI 和打包工具实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| + project-a/
+ project-b/
+ project-c/
...
- project-x/
- node_modules/
- dist/
- dev/
- src/
+ common/
+ feature-a/
+ feature-b/
+ feature-c/
...
- feature-x/
xxxx.js/ts
xxx.svg/png/jpg
xxx.css/scss
- index.html
- lint
|
（本篇结束）