搭建工程目录

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 预处理

+ 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 和打包工具实现

+ 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

---

更新日志：

• 2015-07-15