開始的開始，前端項(xiàng)目很簡單，html放外面，然后新建一個css和js文件夾，看起來很清晰。
隨著時間推進(jìn)，項(xiàng)目變大，問題開始一一出現(xiàn)了：
- html 太多，找起來麻煩
- css 和 js 需要壓縮
- css 和 js需要發(fā)布到 CDN
- 開始只簡單依賴一個jQuery，后來發(fā)現(xiàn)依賴的插件越來越多，不好更新維護(hù)
- html 里面怎么實(shí)現(xiàn)公共一個頭
- js和css包含大量重復(fù)代碼，怎么重構(gòu)項(xiàng)目
- 前端如何把代碼交付給后端填模板代碼
很多公司面對這些問題都有了自己的方案，Node 因?yàn)檎Z言也是JS，成了很多公司的首選。
相關(guān)的熱門框架有g(shù)runt,gulp,webpack,bower等等。
愿意讀文檔的人早以用上這些新奇玩意兒并且解決了大量前端問題。
雖然工具很多，但對于很多新團(tuán)隊(duì)來說，如何完美地規(guī)劃項(xiàng)目卻仍然是一道坎。
他們不知道應(yīng)該在何時，如何使用這些工具。前端項(xiàng)目的設(shè)計可以非常隨意，正是這些隨意，讓很多人在選擇中開始迷茫。
本文將提供一個趨于完美的前端項(xiàng)目結(jié)構(gòu)規(guī)劃方案，希望能為各位在重構(gòu)前端項(xiàng)目時提供幫助。
一個規(guī)劃方案，并不只是定義文件怎么放，文件怎么命名，而更重要的是包含實(shí)現(xiàn)整個流程的工具，如果沒有工具支持，所有方案都是扯淡。
前端項(xiàng)目結(jié)構(gòu)
根目錄
|- assets: 存放所有js和css等，這些資源可能發(fā)布到 CDN
| |- images: 存放所有 CSS 樣式需要的背景圖片
| |- fonts: 存放所有 CSS 樣式需要的字體
| |- styles: 存放所有CSS
| | |- common: 存放公共的 CSS 代碼
| |- scripts: 存放所有 JS
| | |- common: 存放公共的 JS 代碼
|- include: 存放所有公共的 HTML 頭尾片段
|- images: 存放前景圖片和flash
|- libs: 存放前端所需的第三方類庫
|- views: 如果使用了后端 MVC 框架，則頁面放在這里。
|- _my: 存放開發(fā)者自己需要的文件，這個文件夾應(yīng)該被 GIT 和 SVN 忽略掉。
|- page1.html 存放最終的前端頁面，如果使用了 MVC 框架則不需要。
HTML 文檔結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>標(biāo)題</title>
<!-- #include virtual="/include/header.inc" -->
<link rel="stylesheet" type="text/css" href="assets/styles/common/blog.css" />
<link rel="stylesheet" type="text/css" href="assets/styles/page2.css" />
</head>
<body>
<!-- #include virtual="/include/body.inc" -->
內(nèi)容
<!-- #include virtual="/include/footer.inc" -->
<script type="text/javascript" src="assets/scripts/common/blog.js"></script>
<script type="text/javascript" src="assets/scripts/page2.js"></script>
<!-- #include virtual="/include/stat.inc" -->
</body>
</html>
/include/header.inc:
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, maximum-scale=1, user-scalable=no" />
<meta name="apple-itunes-app" content="app-id, app-argument=">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="favicon.png">
<link rel="stylesheet" type="text/css" href="../assets/styles/common/common.css" />
/include/body.inc:
這里可以放一些全站公用的頁頭，比如需要為全站加一個緊急通知的 banner，可以加在這里。
<!--[if lt IE 9]>
<div role="alert">你的瀏覽器實(shí)在<strong>太太太太太太舊了</strong>，放學(xué)別走，升級完瀏覽器再說 <a target="_blank" class="alert-link"
href="http://www.">炎黃養(yǎng)生升級</a>
</div>
<![endif]-->
/include/footer.inc:
這里可以放一些全站公用的頁腳，比如版權(quán)聲明之類。
<div>版權(quán)所有 @copy; 2015 xuld</div>
<script type="text/javascript" src="assets/scripts/common/common.js"></script>
/include/stat.inc:
這里可以放一些網(wǎng)站統(tǒng)計代碼。
<!-- 在這里添加網(wǎng)站統(tǒng)計代碼 -->
其它文件
如果項(xiàng)目里還有公共的側(cè)邊欄、廣告位等，也可以自行在 include 添加其它文件。
如果一個網(wǎng)站需要有多種不同版權(quán)聲明，可以分別做一個 footer-full.inc 和 footer-simple.inc，然后公共包含：footer-common.inc。
靜態(tài)資源引用
如果項(xiàng)目里需要使用 less/sass/coffee 等技術(shù)，則可以直接引用這些文件。發(fā)布時，發(fā)布工具完成這些事情：
1. 編譯 less/sass/coffee 文件，轉(zhuǎn)換為對應(yīng)的 css/js 文件。
2. 更新 HTML 文件里的資源引用地址，引用生成好的 css/js 文件。
3. 為這些資源文件引用地址添加時間戳。
4. 如果項(xiàng)目使用了 CDN，則發(fā)布工具應(yīng)該自動上傳文件到 CDN，并更改文件里的路徑為 CDN 的地址。
發(fā)布前：
<link rel="stylesheet" type="text/css" href="../assets/styles/page1.less" />
發(fā)布后：
<link rel="stylesheet" type="text/css" href="http:///project/assets/styles/page1.css?_=md5" />
時間戳問題
靜態(tài)文件由于存在緩存，每次發(fā)布如果保持路徑不變，很容易導(dǎo)致頁面不更新。有三種方案：
- 為路徑加上 ?_=md5
- 更新文件名為 page1_md5.js
- 復(fù)制到名為 20151021 的文件夾
個人建議使用方案1，因?yàn)楦膭恿可?，不易出錯。但如果CDN不支持，可以采用其它方案。
腳本和樣式
如果項(xiàng)目中，一個人專門負(fù)責(zé) css,一個人專門負(fù)責(zé) js,一個人專門負(fù)責(zé)將 html 轉(zhuǎn)換為后臺代碼，則上述文件夾結(jié)構(gòu)是比較合理的。
如果是同一個人負(fù)責(zé)css和js，則建議不區(qū)分 styles 和 scripts 文件夾，直接放在 assets 目錄。
如果連轉(zhuǎn)換html 到后臺代碼都是同一個人，則建議將 css 和 js 直接寫在頁面里，發(fā)布工具負(fù)責(zé)提取出來：
<style __dest="assets/styles/page1.css">
/* CSS 代碼 */
</style>
公共代碼依賴
每個HTML頁面，都必須引3個js和3個css，分別是：
- 全站公用的 js：common/common.js
- 全項(xiàng)目（或類似頁面，比如列表頁、詳情頁）公用的js：common/blog.js
- 頁面私有的js：common/page1.js
css 和 js處理方式一致，且一一對應(yīng)。
個別頁面可以引入一些外部的js和css，比如 editor.js 這種比較大的文件。但原則上每個文件最多只能引 5個js和5個css。需要引的文件多時則需要打包合并。
出于性能考慮，有時候可以將頁面私有的js和css直接內(nèi)聯(lián)到頁面。
<script src="assets/page1.js?__inline"></script>
模塊化組件
所有可復(fù)用組件、第三方框架都放在 libs，libs 文件發(fā)布時會被忽略掉，項(xiàng)目里也不能直接引用 libs 下的代碼。
如果需要引用一個組件，有三種方案：
- 簡單的文件包含
- 基于 CommonJS 模塊化方案
- 基于其它模塊化方案
簡單的文件包含
如果項(xiàng)目較小，并不需要太大模塊化東西，直接使用文件包含是最方便的：
common.js
// #include /libs/3rdlibs/jquery-2.1.0.js
// #include /libs/3rdlibs/jquery.mobile.js
// 其它項(xiàng)目需要的公共代碼
發(fā)布工具會處理 #include 。
CommonJS 模塊化方案
var $ = require('libs/3rdlibs/jquery');發(fā)布后，CommonJs 模塊會被轉(zhuǎn)換為標(biāo)準(zhǔn)的 AMD 模塊。
打包問題
假設(shè)一個頁面需要引用 common.js 和 page1.js ，而這2個js又分別引用了 libs 下的若干個組件（可能有重復(fù)）
那么 page1.js 可以添加如下指令排除掉 common.js 所引入的文件
// #exclude common.js
var $ = require('libs/3rdlibs/jquery');最后生成的代碼，page1.js 將包含所有所需的模塊，并刪除了 common.js 包含的模塊。
項(xiàng)目發(fā)布和調(diào)試
以上所介紹的代碼方案是不能直接在瀏覽器運(yùn)行的，這里有三個方案可以實(shí)現(xiàn)本文所描述的各個功能：
- 在瀏覽器執(zhí)行 JS 實(shí)現(xiàn)上文所描述的所有功能。優(yōu)點(diǎn)：兼容性好，缺點(diǎn)：效率低。
- 監(jiān)聽文件改變，文件保存后就解析以上指令并生成文件。優(yōu)點(diǎn)：兼容性好，處理方便，缺點(diǎn)：不穩(wěn)定。
- 自定義服務(wù)器，這個服務(wù)器在請求時自動完成生成任務(wù)。優(yōu)點(diǎn)：效率高且穩(wěn)定，缺點(diǎn)：需要定制服務(wù)器，且只在開發(fā)時使用。
其它工具支持
占位圖
對應(yīng)經(jīng)常切頁面的哥們，占位圖是非常有用的。
Ajax 接口模擬
a.njs:
寫在最后
本文所描述的是一種建議的做法，也是一個發(fā)布工具所需要提供的功能。每個團(tuán)隊(duì)可以針對自己的需求做一些個別的定制。本文所提到的示例都是以 tpack為原型書寫的。不同的工具會有稍微不同的寫法。但是其解決的問題是一樣的。
