目录结构

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

参考资料