目录结构

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

总览

├── src
│   ├── js
│   │   ├── main.js
│   │   ├── plugins.js
│   │   └── vendor
│   │       └── modernizr-2.8.3.min.js
│   ├── css
│   │   └── main.css
│   ├── img
│   ├── favicon.ico
│   ├── humans.txt
│   ├── index.html
│   ├── 404.html
│   ├── apple-touch-icon.png
│   ├── browserconfig.xml
│   ├── crossdomain.xml
│   ├── robots.txt
│   ├── tile-wide.png
│   └── tile.png
├── test
│   ├── file_content.js
│   └── file_existence.js
├── dist
│   ├── 404.html
│   ├── LICENSE.txt
│   ├── apple-touch-icon.png
│   ├── browserconfig.xml
│   ├── crossdomain.xml
│   ├── css
│   │   ├── main.css
│   │   └── normalize.css
│   ├── favicon.ico
│   ├── humans.txt
│   ├── img
│   ├── index.html
│   ├── js
│   │   ├── main.js
│   │   ├── plugins.js
│   │   └── vendor
│   │       ├── jquery-1.11.2.min.js
│   │       └── modernizr-2.8.3.min.js
│   ├── robots.txt
│   ├── tile-wide.png
│   └── tile.png
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.txt
├── README.md
├── gulpfile.js
├── 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

参考资料