# 目錄結構 不管大型還是小型項目，清晰的目錄結構是開發過程的好的開始。以我常用的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 ### 參考資料 - [Baidu EFE team](https://github.com/ecomfe) - [Baidu EFE team: spec](https://github.com/ecomfe/spec) - [HTML5-boilerplate](https://github.com/h5bp/html5-boilerplate)