今天的命題是憋沿，制作幾個(gè)到幾十個(gè)基于Bootstrap的頁面模板，然后交給后端程序員沪猴，也就是說辐啄，我要做的并不是業(yè)內(nèi)討論最多的全棧開發(fā)甥绿，而是只負(fù)責(zé)給后端程序員提供網(wǎng)頁代碼。
基礎(chǔ)知識(shí)
一般網(wǎng)站往往架構(gòu)在后端MVC框架中则披，由后端程序猿做主導(dǎo)，所以：
1洗出、前端程序猿要對后端MVC框架有基本的了解士复，尤其是MVC中的V。
2翩活、懂得V之后阱洪，就要掌握模板引擎的規(guī)則。前端模板引擎跟后端模板引擎很相似菠镇，做一些字符替換就可以將前端引擎的代碼段改成后端引擎的冗荸。
我在參考了一些簡單項(xiàng)目的前端工作流之后，搞了這么一個(gè)簡單的前端工作流利耍。
項(xiàng)目目錄
項(xiàng)目目錄的設(shè)定可謂眾說紛紜蚌本，各有各的設(shè)定方案，比如靜態(tài)目錄的命名隘梨，有人用public程癌，有人用static……我認(rèn)為沒必要太糾結(jié)，原因是轴猎，你作為前端開發(fā)者嵌莉，你的項(xiàng)目目錄是要先跟后端程序猿協(xié)商的，后端開發(fā)者有他的一整套目錄設(shè)定方式捻脖，他設(shè)定的目錄結(jié)構(gòu)才是真正在服務(wù)器上體現(xiàn)的目錄結(jié)構(gòu)锐峭，所以，前端項(xiàng)目的目錄設(shè)定原則可婶，是為了讓自己方便開發(fā)沿癞，也為了方便的傳到測試服務(wù)器的指定目錄中。
再簡單點(diǎn)說扰肌，前端項(xiàng)目的目錄結(jié)構(gòu)抛寝，只要能保證前端開發(fā)者以最一目了然、最高效的方式做開發(fā)曙旭，上傳到測試服務(wù)器可以直接用盗舰，就可以了。
基于上述的原則桂躏，我把項(xiàng)目目錄分為7個(gè)子目錄：
api：模擬網(wǎng)站API钻趋。
media：內(nèi)容視頻、內(nèi)容音頻剂习。
img：網(wǎng)站所用的內(nèi)容圖片蛮位。
libs：js庫和css庫较沪。
work：工作目錄，所有需要編寫的模板（利用gulp-include組合HTML代碼）失仁、html尸曼、js和css都在里面。
build：構(gòu)建目錄也是測試目錄萄焦，用于本地預(yù)覽和測試控轿，測試通過的話，就生成dist目錄里的內(nèi)容
dist：交付目錄拂封，build跟dist的區(qū)別是茬射，build的css和js文件都沒有合并，更沒有壓縮冒签，html文件也沒有壓縮在抛，而dist的所有文件都經(jīng)過了合并、壓縮萧恕，并且還有一些其他的后置處理措施刚梭，比如后端會(huì)讓你把合并起來的HTML再拆開，因?yàn)槟愕腍TML只是后端MVC的V廊鸥，V是需要拆成各種模塊的望浩，而且后端還會(huì)對模板做一些修改，比如加入各種模板標(biāo)簽惰说，這些都應(yīng)該由后端跟前端商議好磨德，由前端利用gulp完成。
方案的制定原則是：
1吆视、保證工作目錄典挑、開發(fā)目錄和上線目錄的內(nèi)容盡可能的簡單。因?yàn)閔tml/tpl/js/css是最常編輯的文件啦吧，而內(nèi)容圖片您觉、API很少修改，庫授滓、字體更是不會(huì)修改琳水，所以都應(yīng)該擇出來。
2般堆、img文件夾內(nèi)存放內(nèi)容圖片在孝，它不用編輯，所以擇出來淮摔。但是注意私沮，它需要一個(gè)監(jiān)視器來監(jiān)視文件的添加，一旦有添加和橙，就自動(dòng)壓縮體積仔燕，然后覆蓋源圖造垛。
3、libs文件夾的定位是：存放js庫和css庫以及字體庫晰搀。
4五辽、api文件夾的定位是：開發(fā)的時(shí)候使用，上線不用外恕，所以單獨(dú)存放奔脐。
5、media文件夾：存放視頻和音頻吁讨。如果你確定你的項(xiàng)目絕沒有可能用到音頻和視頻，那么這個(gè)文件夾可以取消峦朗。
.
│
├─api 模擬網(wǎng)站API建丧，存放各種json文件
├─dist 略過
├─build
│ ├─css 由scss編譯的css
│ │ ├─global 全站共用css以及bg
│ │ └─index 單頁使用css以及bg
│ ├─html
│ │ index.html 單頁
│ │
│ └─js
│ ├─global 全站共用js
│ └─index 單頁使用js
├─img 內(nèi)容圖片
├─libs js庫和css庫以及字體庫
├─media 視頻和音頻
└─work
├─scss
│ ├─global 全站共用scss以及bg
│ └─index 單頁使用scss以及bg
├─html
│ index.html 單頁
│
├─js
│ ├─global 全站共用js
│ └─index 單頁使用js
└─tpl
├─global 全站共用tpl
└─index 單頁使用tpl
技術(shù)選型
只兼容IE8和以上，特選型如下：
Bootstrap 3最新版 + 插件
jQuery 1版本 + jQuery插件 + 第三方庫
gulp
SASS
基本文件準(zhǔn)備
api
留空
dist
留空波势，本文不涉及上線環(huán)節(jié)
build
可以留空翎朱，依賴gulp創(chuàng)建文件夾和文件
libs
js庫和css庫按照項(xiàng)目名建立文件夾，不要在路徑中包含版本號尺铣。版本號的更新方式是以新版本文件覆蓋老文件拴曲，然后HTML中修改路徑的版本號參數(shù)。
字庫凛忿，比如glyphicons-halflings和Font Awesome澈灼，都跟隨同名css庫存放，如果有其他字庫店溢，比如fa和阿里的iconfont叁熔，也當(dāng)做css庫存放進(jìn)來。
work
html
將一個(gè)html骨架文件放到html目錄床牧，命名為index.html
tpl
1荣回、建立global文件夾，放共用的tpl區(qū)塊文件
2戈咳、建立index文件夾心软，放index.html相關(guān)的tpl區(qū)塊文件
scss
1、建立global文件夾著蛙，放共用的區(qū)塊用的css文件
2删铃、建立index文件夾，放index.html相關(guān)的區(qū)塊用的css文件
js
1册踩、建立global文件夾泳姐，放共用的區(qū)塊用的js文件
2、建立index文件夾暂吉，放index.html相關(guān)的區(qū)塊用的js文件
img
1胖秒、建立global文件夾缎患，放共用的區(qū)塊用的img文件
2、建立index文件夾阎肝，放index.html相關(guān)的區(qū)塊用的img文件
media
如果全站總共需要幾個(gè)或少于50個(gè)media文件挤渔，那么沒必要分文件夾。如果有幾百個(gè)风题，需要按下面的方式建立文件夾判导。
1、建立global文件夾沛硅，放共用的區(qū)塊用的media文件
2眼刃、建立index文件夾，放index.html相關(guān)的區(qū)塊用的media文件
處理Bootstrap
把Bootstrap 3.3.7-sass的源代碼下載下來之后我們看一下摇肌。
js源文件：/assets/javascripts/
scss源文件：/assets/stylesheets/
把放到下面對應(yīng)的文件夾里擂红。
bootstrap
│
├─jssrc
├─scss
然后把bootstrap放到libs文件夾中。
Bootstrap的特殊之處是它是我們項(xiàng)目里唯一的需要定制然后編譯的庫围小，其他的庫都無需修改昵骤。所以，未來定制好bs之后肯适，要把編譯好的css文件变秦、js文件也放到bootstrap文件夾里，也就是：
bootstrap
│
├─css
│ bootstrap.css
│ bootstrap.css.map
│ bootstrap.min.css
│ bootstrap.min.css.map
│ bootstrap-flex.css
│ bootstrap-flex.css.map
│ bootstrap-flex.min.css
│ bootstrap-flex.min.css.map
│ bootstrap-grid.css
│ bootstrap-grid.css.map
│ bootstrap-grid.min.css
│ bootstrap-grid.min.css.map
│ bootstrap-reboot.css
│ bootstrap-reboot.css.map
│ bootstrap-reboot.min.css
│ bootstrap-reboot.min.css.map
├─js
│ bootstrap.js
│ bootstrap.js.map
│ bootstrap.min.js
│ bootstrap.min.js.map
├─jssrc
├─scss
gulp和其他包
gulp和其他包需要安裝在你的本地服務(wù)器的根目錄框舔，這樣它們可以操縱你的服務(wù)器根目錄里面的所有文件蹦玫。
更高層的目錄結(jié)構(gòu)
服務(wù)器根目錄下，應(yīng)新建一個(gè)項(xiàng)目刘绣，比如叫tuangou钳垮，假設(shè)咱們要搞個(gè)團(tuán)購網(wǎng)站。里面就按照上面我說的工作流的目錄建额港。
本機(jī)虛擬主機(jī)設(shè)置
虛擬主機(jī)應(yīng)當(dāng)指向項(xiàng)目目錄饺窿。預(yù)覽build/html文件夾里的HTML的話，就用這個(gè)虛擬域名即可移斩。虛擬域名要在hosts文件中也設(shè)好肚医。
虛擬域名和本機(jī)IP要告訴后端程序猿。
測試服務(wù)器設(shè)置
根據(jù)與后端程序猿的商定方針向瓷，你按規(guī)定肠套，把dist里面的相關(guān)文件上傳到測試服務(wù)器即可。
