目录结构

不管大型还是小型项目，清晰的目录结构是开发过程的好的开始。以我常用的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

参考资料