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/
- build/ (打包文件)
- 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 (项目配置)
|
可以参考：A Gulp Workflow for Frontend Development Automation。
也有按组件式的目录规划，如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
+ project-a/
+ project-b/
+ project-c/
...
- project-x/
- build/
- dev/
- src/
- page/
+ module-a/
+ module-b/
+ module-c/
...
- module-x/
xxx.js
xxxx.js
xxx.png
xxxx.jpg
xxx.scss
|
不建议这样处理，一是不便全局控制和调整，如产品调整输出静态资源之后要到每一个组件目录替换，二是打包工具监视各类型文件于目录层级过多，影响打包效率。这类物理形态上降低耦合，是孤立静止片面的处理方式，不可取。
（本篇结束）