根据 前端开发 の 一致性和复用性，前些日子做了部分调整；根据调整过程中的实际使用效果，结合当前新的认知，今天提出调整新建议。
wph 工程建议
├── global/
│ └── XLS-eXpanded-standard-Leaf-Structure/
├── m/src/ 手机站点
└── www/src/ PC 站点
├── about/
│ ├── css/
│ │ └── index.inc.css
│ ├── html/
│ │ ├── about-us-t.html
│ │ └── contact-us-t.html
│ └── js/
│ └── index.inc.js
├── choose-guide/
│ └── XLS-eXpanded-standard-Leaf-Structure/
├── common/
│ └── XLS-eXpanded-standard-Leaf-Structure/
├── customer/
├── font/
├── hour24/
├── maintenance/
├── manager/
├── supplier/
│ ├── second-level-module/
│ │ └── XLS-eXpanded-standard-Leaf-Structure/
│ └── XLS-eXpanded-standard-Leaf-Structure/
└── XLS-eXpanded-standard-Leaf-Structure/
模块和子模块说明
- about，choose-guide， customer，这些都是模块；
- 子模块建议最多3级；
- 每个目录下的文件目录数建议不超过5-11个；
标准目录（XLS-eXpanded-standard-Leaf-Structure）
├── css/
├── html/
│ └── index.html
├── img/
├── js/
└── tpl/
目录说明
- global/ （全局）
- common/ （公共）
common 只在站点目录下出现，不在模块和子模块中出现，避免命名干扰； - font/ （字体）
font 目录仅在站点根目录下有； - css | sass/ （样式）
- html （页面）
在发布时，html 目录不会在实际的 URL 中出现； - img/ （图片）
- js/ （JavaScript）
- tpl/ （模板：包括 .html，.ejs.html，.mus.html）
命名规则有约定比较好；
这个目录下只有和用户交互的那些文件才可能需要对外发布，否则一般仅在构建时使用； - XLS-eXpanded-standard-Leaf-Structure/
对于展开的标准叶子结构，若目录下没有文件，自然该目录就不会存在； - 文件命名问题
1. 对外发布的：.css，.js，.html，.ejs.html，.mus.html；
2. 用于被 include 的：
.inc.css，.inc.js，.inc.html，.inc.ejs.html，.inc.mus.html；
这几类文件仅在构建时使用； - URL PATH 路径 和 @@include 引用的文件目录存在简单变换映射关系，并不一致；
css 和 js 直接嵌入式（about 示例）
即：将 css 和 js 直接嵌入 html 页面。
目前 about 模块只有 2 个页面，各有一个简单的 css 和 js 文件。
├── css
│ └── index.inc.css
├── html
│ ├── about-us-t.html
│ └── contact-us-t.html
└── js
└── index.inc.js
// 在 /html/*.html 页面内：
<style>@@include('../about/css/index.inc.css')</style>
...
<script>@@include('../about/js/index.inc.js')</script>
上述代码示例在 .html 中使用 css 和 js 的方式，就是嵌入式；两个页面都分别嵌入了，请注意相对路径；
路径设置 和 过渡问题
- 未来一般以 /src/ 为 gulp-file-include 的基准目录（basepath）；
- 在 @@ include 中，请使用文件目录的相对路径；
- 在链接中，请使用相对于当前站点根目录的绝对路径；
当前站点链接以 "/" 开始，外链则使用完整 URL；主要是为了防止爬虫或者 Web Link Validator 检查时出错；
注：属于标准目录的哪些关键字在发布时会调整； - 当前的目录结构 和 gulp-file-include 相关的 basepath：
- 处理 html 页面的 include basepath：/src/partials/；
- 处理 css 的 include basepath：/src/css/partials/；
- 处理 js 的 include basepath：在 datajs 工程下处理； - /src/partials 目录下的 .html 文件
这些文件是被 include 的文件，一般都是 HTML 片段，不会发布出去；
将逐步剥离到各个 common 和 各个模块下的 tpl 目录下；
css 和 js 合并引入方式
- css；
前期可继续全部合并发布在 global.css 中，没有单独发布的其他 css 文件，原来 /css/partials 下的文件要调整到各个模块的 css 目录下；
在 global.css 中，请这样 include css 文件：@@include('../../about/css/index.inc.css')； - js 类同 css；
/html/*.html 的 include 方法
在 /html/ 各目录下的 *.html 文件中，请这样 include tpl 下的 HTML 片段文件：@@include('../about/tpl/index.html')；
img 的处理
- /$module/$submodule/img/example.png；
发布和引用：/img/$module/$submodule/example.png； - 目前图片格式为：(.(png|jpg|gif))；
绝大部分文件 png 格式；很少部分 jpg 和 gif，比如大文件 jpg，而 gif 小动画； - 图片约定
文件名：全小写字母，中划线分隔，少用数字；
看起来有含义、有意义 的图片名称有利于排查问题、促进复用。
red-bubble.png，supplier-avatar.png, down-arrow.png；
看起来有含义、有意义的图片名称有利于促进复用；使用 icon1/icon2/icon3来命名就很难有美感；
提出建议所参考的几个方面
业务设计
- 用户：客户、供应商（工程商）、管理员；
- 我们产品属于垂直电商领域，提供在线服务；
- 页面内容和版块设计的变化是渐进的，根据市场反馈逐步快速调整；
- 用户数量并不很大，除了在推广期间，要考虑潜在客户的超常流量外，大部分时间，不需要过度关注网站压力。
部署
- 按版本部署
在 Nginx 上设置规则；目的：为了解决大版本缓存； - 按分支开发
每个模块一个分支；即：可支持模块上下线；
代码
- 可理解、可复用；
- 持续测试、持续集成、持续部署；
- 结构良好、代码整洁、风格一致；
过程
- 开发基本理念：敏捷开发；
- 主要按照功能模块进行分工；
- 切页面和数据JS两个主要阶段；
