• 目录结构
    • 总览
    • src
    • dist
    • test
    • doc
    • 其他根目录文件
    • 参考资料

    目录结构

    不管大型还是小型项目，清晰的目录结构是开发过程的好的开始。以我常用的web项目为例，搭建一下目录结构.

    总览

    1. ├── src
    2. │   ├── js
    3. │   │   ├── main.js
    4. │   │   ├── plugins.js
    5. │   │   └── vendor
    6. │   │       └── modernizr-2.8.3.min.js
    7. │   ├── css
    8. │   │   └── main.css
    9. │   ├── img
    10. │   ├── favicon.ico
    11. │   ├── humans.txt
    12. │   ├── index.html
    13. │   ├── 404.html
    14. │   ├── apple-touch-icon.png
    15. │   ├── browserconfig.xml
    16. │   ├── crossdomain.xml
    17. │   ├── robots.txt
    18. │   ├── tile-wide.png
    19. │   └── tile.png
    20. ├── test
    21. │   ├── file_content.js
    22. │   └── file_existence.js
    23. ├── dist
    24. │   ├── 404.html
    25. │   ├── LICENSE.txt
    26. │   ├── apple-touch-icon.png
    27. │   ├── browserconfig.xml
    28. │   ├── crossdomain.xml
    29. │   ├── css
    30. │   │   ├── main.css
    31. │   │   └── normalize.css
    32. │   ├── favicon.ico
    33. │   ├── humans.txt
    34. │   ├── img
    35. │   ├── index.html
    36. │   ├── js
    37. │   │   ├── main.js
    38. │   │   ├── plugins.js
    39. │   │   └── vendor
    40. │   │       ├── jquery-1.11.2.min.js
    41. │   │       └── modernizr-2.8.3.min.js
    42. │   ├── robots.txt
    43. │   ├── tile-wide.png
    44. │   └── tile.png
    45. ├── CHANGELOG.md
    46. ├── CONTRIBUTING.md
    47. ├── LICENSE.txt
    48. ├── README.md
    49. ├── gulpfile.js
    50. ├── package.json

    目录结构清晰是首要目标，至于命名只要能达到表意的目的即可。

    src

    此目录专注于开发，存放的都是源文件，不需要压缩合并。目录下主要分为：

    • css(styles): 样式文件
    • js(scripts): 脚本文件
    • img(images): 图片素材
    • font(fonts): 存放字体
    • 其他: 按照分类不同划分目录

    文件名上面，简写的话都使用单数形式，全称的话使用复数形式。

    dist

    此目录为编译生成目录，用于部署环境，目录结构和src保持一致。

    test

    此目录为测试目录，存放和项目测试相关的文件。

    doc

    如果存在文档说明，放置在此目录下。

    其他根目录文件

    根目录下的其他文件，一般还有:

    • .editorconfig: 代码样式统一格式文件
    • .jscsrc:
    • .travis.yml:
    • .jshintrc: jshint配置文件
    • csscomb.json: csscomb配置文件
    • .gitignore: git忽略文件
    • .gitattributes: git属性文件
    • .bowerrc
    • bower.json
    • package.json
    • gruntfile.js/gulpfile.js

    参考资料

    • Baidu EFE team
    • Baidu EFE team: spec
    • HTML5-boilerplate