對于前端的工作迎膜，經(jīng)常會有專題頁或者靜態(tài)頁的需求，這段時間做了幾個靜態(tài)頁面的需求浆兰，自己摸索出了一些門道星虹，在這里分享一下自己對此類開發(fā)工作的一些經(jīng)驗和流程零抬，以及自己的一些思考，希望能對大家有所幫助宽涌。
當(dāng)切圖仔遇到靜態(tài)頁
我所在部門為公司用戶體驗部(UX)平夜，工作覆蓋公司大部分產(chǎn)品，基本幾個主要的產(chǎn)品線的web頁面和移動端均由我們部門支持卸亮，最近做項目忽妒，老是被妹紙問「切好圖沒」，那就自稱切圖仔吧兼贸，常常有活動頁段直、專題頁的需求：需求一確定，設(shè)計部門的同事psd設(shè)計稿一出溶诞，我們前端就進行重構(gòu)和開發(fā)了鸯檬。
工作流程大概就是1.切圖 >> 2.寫html+css >> 3.寫js ，這些項目大部分沒有復(fù)雜js邏輯螺垢，往往就是原生js喧务，稍微復(fù)雜點的就jquery，或者就直接用我們內(nèi)部的一js庫枉圃。
這類網(wǎng)頁大多是靜態(tài)頁面功茴，由.html,.css,.js和切圖所產(chǎn)生的.jpeg或者.png文件構(gòu)成∧跚祝基本就是一個index.html坐中央坎穿，左手一個css小妞，右手一個js小弟返劲，前后一堆圖片圍繞的節(jié)奏玲昧。到了業(yè)務(wù)繁忙的時候，一天一個甚至幾個類似項目并行的情景也是可能發(fā)生的篮绿，工作起來常常會比較零碎煩瑣酌呆，那么我們有沒有什么辦法可以讓這類工作更加便捷、高效呢搔耕？
首先隙袁，我們來看看平常是怎么做的：
傳統(tǒng)做法
- 創(chuàng)建文件夾,命名為
新項目balbala - 新建一個
index.html，從過去的一個文件中把用得到的html代碼拷貝進來弃榨，再新建css菩收、js、images文件夾 - 新建
style.css,base.js等需要的樣式表文件和js以及一堆亂七八糟的文件鲸睛。 - 切圖娜饵、寫html，寫css官辈、寫js
- 不斷F5刷新箱舞、F5刷新：瀏覽器里測試
- 差不多完成了遍坟，開一個壓縮工具（線下的或者在線的），壓縮下js和css文件晴股，新建一個
min.style.css和min.v.js愿伴，修改html中的文件路徑，填充电湘，搞掂隔节。 - 右鍵，單擊寂呛，壓縮成一個
.zip文件怎诫，再重新命名下為新項目balblaa.zip之類，發(fā)給測試工作人員贷痪，或者直接把整個文件夾通過QQ傳給測試幻妓，要不就自己動手直接ftp上傳。 - 測試時劫拢、上線后遇到bug了肉津，PM呼叫了；有細節(jié)要修正了尚镰，PM又呼叫了阀圾∧睦咳狗唉，線下debug，保存一個新的
新項目balbla-修改.zip>> 測試上線 or ftp上傳涡真，又重復(fù)4分俯、5、6哆料、7步缸剪。 - 再測試、再debug东亦、再打包
新項目balbla-修改新.zip杏节、再發(fā)送上傳......心中默默地說「PM你好」。
我故意把整套流程寫得很細典阵，是為了讓大家感受一下我們習(xí)以為常的工作是否有改進的空間奋渔，比如說創(chuàng)建新項目的時候，我們可能會先新建一個空白的模板壮啊，一遇到新項目只要復(fù)制嫉鲸、重命名就可以使用了，這樣就可以省去[1~3]步瑣碎的工作歹啼，當(dāng)然玄渗，第5-6部開發(fā)座菠，每個開發(fā)人員根據(jù)自己的習(xí)慣和不同的工具，都也可以有不同的方案：強大的IDE編輯器藤树、輔助的代碼檢查工具等等浴滴。
說到這里我意識流跳轉(zhuǎn)下，談?wù)劇阜椒ㄕ摗沟膯栴}也榄，思考下為什么我們需要「寫作」和「記錄」：
「記錄」本身不僅僅是一種行為巡莹，也是一種方法，當(dāng)我們遇到問題的時候甜紫，如果僅僅只是在腦海中想降宅，可能難以跳出自己思維的限制，容易在一個小范圍內(nèi)轉(zhuǎn)圈圈囚霸、在思維的泥潭里混亂迷失腰根；把思維中跳躍的、不確定的東西通過文字拓型、圖形記錄下來额嘿，有助于我們看清楚事物的結(jié)構(gòu)、事情的流程劣挫，發(fā)現(xiàn)不同事務(wù)之間的關(guān)系和聯(lián)系册养，進而組織和系統(tǒng)化、邏輯化自己的思維压固，有助于我們發(fā)現(xiàn)問題球拦、解決問題。
說完上面的帐我，我現(xiàn)在分享一下我自己的開發(fā)工具和流程坎炼，小生不才，技術(shù)依舊渣拦键，寫出來谣光，也是跟大家交流，望高手輕黑淡噴芬为。
使用的工具軟件&&開發(fā)環(huán)境相關(guān)
OSX系統(tǒng):sublime萄金、iterm2、tmux媚朦、photoshocp cc氧敢、MAMP pro、charles（抓包）
iMac虛擬機里裝Windows 8.1: 裝IE11（支持IE5.511兼容性測試）莲镣、IEtester（IE5.510兼容性測試）福稳、獵豹、搜狗等主流瀏覽器瑞侮。
macbook虛擬機里裝Windows XP: 留著原生的IE6（啊~~我們的訪客**%是IE6用戶啊的圆，必須得做兼容啊傷不起啊傷不起）
開發(fā)環(huán)境配置相關(guān)（以關(guān)鍵字形式描述）:nodejs鼓拧，npm，grunt越妈、git（個人開發(fā)使用）季俩、svn（部門內(nèi)部使用）……，git和SVN均日常開發(fā)均在命令行進行梅掠，但也有客戶端App輔助酌住。
服務(wù)器環(huán)境：自用linode服務(wù)器一臺 centos （線上Git+自己的網(wǎng)站服務(wù)相關(guān)+翻墻），aliyun最低配置服務(wù)器一臺 ubuntu（線上測試+git+ftp）
簡單說一下自己的硬軟件開發(fā)環(huán)境配置阎抒，供大家參考酪我。
我使用哪些工具開發(fā)：
版本管理:使用Git和github
有些開發(fā)者覺得項目簡單，哪怕出現(xiàn)問題且叁，也是分分鐘解決的事情都哭，無需版本管理，對于我自己來說逞带，人菜技術(shù)渣欺矫，bug是大寶天天見，所以在學(xué)習(xí)前端的很早階段展氓，就先系統(tǒng)地學(xué)習(xí)了一遍Git相關(guān)穆趴，進入公司發(fā)現(xiàn)部門使用的是SVN，又把SVN的資料看了一遍∮龉現(xiàn)在公司線上服務(wù)器是用SVN+ftp的組合未妹，自己在本地還是使用git的，配合服務(wù)器器上的git倉庫和測試環(huán)境勺疼，也可以十分方便地通過git push命令直接先推送到線上測試教寂。
使用Grunt
剛接觸到Grunt捏鱼，是自學(xué)前端的時候看國外的視頻介紹Yeoman执庐，后來研究發(fā)現(xiàn)了Grunt，bower這一套前端自動化导梆、模塊化開發(fā)工具和流程轨淌。我發(fā)現(xiàn)一個有趣的現(xiàn)象，就是國外的前端開發(fā)人員基本上都是使用Mac和OS系統(tǒng)看尼，并且大量開發(fā)者熟悉和習(xí)慣命令行這一套递鹉，國內(nèi)開發(fā)者則大多是Windows+圖形化界面，這其中倒也可以看出中外開發(fā)者的一些習(xí)慣差異藏斩。
使用StaticPage（其實這是這篇文章的重點 ╮(╯_╰)╭ ）
StaticPage是我根據(jù)自己的工作需要配置的一套Gruntfile.js躏结，基于Grunt，需要node.js狰域，至于配置Nodejs媳拴，大家可自行谷歌百度黄橘。
該項目的地址為：
https://github.com/foru17/StaticPage
詳細的教程在文檔中有說明，歡迎大家stat屈溉，fork塞关。在這里我再補充一下：
為什么選擇這個？
好吧子巾，實際上這個StaticPage屬于輪子帆赢，只不過自己根據(jù)自己的需求定制而已，現(xiàn)在已經(jīng)存有類似的模板线梗、樣板或者workflow椰于。
比如說html5boilerplate，或者更高大上的Yeoman仪搔，html5boilerplate給我們展示了一個優(yōu)秀的廉羔、完整的網(wǎng)站模板，其中的文件結(jié)構(gòu)很值得我們學(xué)習(xí)僻造，而Yeoman則直接給我們提供了一套完全自動化的工具憋他，集合Grunt、bower髓削、yo竹挡，自動編譯壓縮、處理圖片立膛、livereload等等可謂讓前端開發(fā)一下子趕英超美到達潮流前線揪罕，感受一下這邊重寫一下css和js，幾臺甚至十幾臺設(shè)備自動刷新進行適配測試的壯觀場景：高大上的感覺有木有宝泵。
但是好啰，強大歸強大，牛逼歸牛逼儿奶，不得不說框往，在不少場景，尤其是我們只進行簡單靜態(tài)頁開發(fā)的情況下闯捎，使用這兩個東西還充滿了高射炮打蚊子椰弊、和殺雞用牛刀的虐殺和冗余感，每次還要刪除多余的文件瓤鼻，讓我多少還是有點不爽秉版。另外，這兩個文檔主要還是英文茬祷，也給國內(nèi)的不少開發(fā)者帶來了語言上的阻礙（我們不得不承認清焕，不少開發(fā)者面對非母語還是有抵觸情緒的）。
嗯哼，說了這些廢話秸妥，下面來介紹下StaicPage借卧，如同他的名字，核心就是解決靜態(tài)頁面的最基礎(chǔ)需求:
特色（做一個有特色的人筛峭，不要做一個特色的人）
1.簡:一目了然的文件夾結(jié)構(gòu)和文件铐刘。
2.快:快速創(chuàng)建模板、無需再做重復(fù)性的復(fù)制粘貼和配置影晓，快速投入工作解決核心問題镰吵，一鍵上傳到FTP服務(wù)器(用git的童鞋別嘲笑嘛~ ~俺們用的就是ftp嘛）
3.智:自動化檢查、編譯挂签、壓縮css和js文件
StaticPage所包含的tasks
- 支持Sass編譯
- CSS文件壓縮
- js文件文件壓縮: uglify
- html文件壓縮:清除多余注釋等
- 自動監(jiān)測文件變化:自動編譯和壓縮
- 代碼打包zip疤祭，標(biāo)注時間戳
- FTP上傳
一切從簡，一切是根據(jù)自己的實際需求而配置的饵婆，不求大而全勺馆，只求合適和實用，不僅要合適自己的開發(fā)習(xí)慣侨核，也要適配公司的開發(fā)環(huán)境草穆。當(dāng)然，只要你稍微了解Grunt搓译，也可以在此基礎(chǔ)上修改配置悲柱，讓grunt支持更多強大的功能：合并js、換一個js壓縮工具等等些己。
一個更快豌鸡、更智能的自動化工作流程
當(dāng)你配置好相應(yīng)的環(huán)境后，接下來就開始擁護自動化的便利吧段标。
舉一個栗子（以Mac為例:用win的童鞋可參考）
小石最近接到了一個項目涯冠，射即濕童鞋已經(jīng)把psd交給了他，好吧逼庞，這下開始干活了蛇更。開(sublime || notepad || dreamwaves) ，開photoshop往堡，開干械荷！
首先我們進到自己常用的開發(fā)目錄（養(yǎng)成好習(xí)慣共耍，在固定的目錄下進行開發(fā)：方便管理備份）虑灰，像我就一般是在~/Dropbox/UX/SVN/branch下進行公司項目的開發(fā)。
1.git clone我們的StaticPage項目
git clone https://github.com/foru17/StaticPage.git
//此時該目錄下出現(xiàn)了一個新的名為 StaticPage的文件夾痹兜，接下來我們改下名
mv StaticPage NewProject
2.新的文件夾建好了穆咐，我們用常用編輯器打開看看，可以看到文件結(jié)構(gòu)十分明了:
首先，養(yǎng)成好習(xí)慣对湃，在文檔中寫上該項目的一些信息崖叫，嗯哼，留下自己的印記嘛拍柒。
當(dāng)然心傀，首先別忘了把package.json和Gruntfile.js里的項目名詞改一下，注意package.json中的名稱只能使用英文拆讯，否則會報錯脂男。
3.接下來，我們按照文檔种呐，安裝npm依賴包宰翅，當(dāng)然是在NewProject的目錄下執(zhí)行。
npm install
經(jīng)過漫長的等待（國內(nèi)訪問npm官網(wǎng)速度有點慢:可以使用淘寶的npm鏡像爽室，方法參考cnpm）汁讼，安裝好后，我們就可以進行開發(fā)啦阔墩。
4.針對開發(fā)嘿架，我們設(shè)置了幾套方法，分別是
grunt：執(zhí)行默認tasks : cssmin 和 uglify 可壓縮css和js文件啸箫，屬于被動執(zhí)行：即只有輸入命令后才進行壓縮眶明，會自動將css/style.css中的文件壓縮到assets/css/min.style.css，js/base.js到assets/js/min.v.jsgrunt watch: 執(zhí)行文件監(jiān)聽筐高，一旦css/目錄和js/下所有文件（包含scss）發(fā)現(xiàn)變動搜囱，即執(zhí)行Sass編譯壓縮和js壓縮。grunt watch:base:不使用Sass柑土，只監(jiān)聽普通的.css和js/下的文件蜀肘。grunt bundle:打包最終的純凈代碼，當(dāng)code完成后稽屏，如果需要打包發(fā)送給其他人扮宠，可直接執(zhí)行此命名，將在項目主目錄下生成<項目名>-<當(dāng)前時間>.zip格式的壓縮包狐榔。其中的<項目名>由開頭我們在package.json或者Gruntfile.js中設(shè)置的名稱決定坛增。grunt publish：發(fā)布到FTP服務(wù)器（需配置相應(yīng)文件，詳情見下）
需要注意的是薄腻，我們發(fā)布到FTP服務(wù)器時收捣，需要在Gruntfile.js中進行相應(yīng)的配置，配置如圖庵楷。
這時罢艾，我們做一個簡單的頁面楣颠，執(zhí)行grunt watch:base，這時候如果我們修改css文件或者js文件咐蚯，終端會自動顯示監(jiān)測到的變化童漩，并且檢查是否出錯（會提示什么文件哪一行出錯），最終壓縮好了min.style.css春锋。
經(jīng)過開發(fā)矫膨，終于搞掂了，接下來我們就要發(fā)布上線了期奔，先打包下豆拨，執(zhí)行grunt bundle
稍等幾秒，看到我們的小mac正在奮力進行一系列工作：清空原先的文件能庆、復(fù)制施禾、壓縮、打包……Bingo搁胆！
這個時候弥搞，我們進到我們的文件目錄，一個簡單好看的.zip壓縮包已經(jīng)生成啦渠旁，打開一看攀例，里面是干干凈凈的代碼（全部是build/文件夾中的文件 ）：代碼哥哥輕輕地走了，就如同他輕輕地來顾腊，不帶走一片多余的文件~ ~
咳咳粤铭，壓縮好了，這下可以發(fā)送給測試的同學(xué)杂靶，或者就自己上傳到FTP吧梆惯。執(zhí)行一下grunt publish。（此處用另外一個例子演示下）吗垮，噔噔噔噔垛吗，這時我們用FTP客戶端登錄下我們的FTP看看，最新的文件都上來啦烁登，當(dāng)然怯屉，也是干干凈凈的代碼。
總結(jié)
一個簡單的項目饵沧，配置好工具后锨络，還是能做到很快速的開發(fā)、發(fā)布和管理的狼牺。
我的建議依舊是：
- 不管線上服務(wù)器是Git羡儿、SVN還是FTP，線下都要做好文件管理和版本管理：哪怕是線上服務(wù)只有FTP锁右，一樣可以通過變通的方法實現(xiàn)VC(Version Control)失受。
- 有一個測試服務(wù)器：方便調(diào)試:前段時間與公司珠海分公司的同事對接一個靜態(tài)頁項目讶泰，每天都有圖片咏瑟、文案的變更需求拂到，加上要做兼容性測試，我就直接把項目放到了測試服務(wù)器上码泞，先發(fā)地址給對接的同事檢查再上最終服務(wù)器兄旬。
- 規(guī)范化：不管是文檔、文件命名余寥，都要做到合理领铐、語義化，便于其他人理解宋舷，方便后續(xù)接手的同事進行跟進和review绪撵。
預(yù)告
寫了這篇沒什么技術(shù)含量的文章，高手們就莫見笑了祝蝠，歡迎大家留言討論音诈。下面的幾期文章，將再談?wù)勎以贛ac下的一些開發(fā)工具绎狭、方法和經(jīng)驗细溅。大家有興趣的朋友可以關(guān)注我的博客羅磊的獨立博客或者微博@羅羅磊磊，或者我的微信公共帳號「羅磊啰嗦」（微信號 speakL ）儡嘶。
