【51CTO.com快譯】一位前端開發(fā)者分享她的工作流與理想工具集選項。每個新項目總會帶來一段令人興奮的旅程，但糟糕的規(guī)劃也可能毀掉這一切。人們往往將前端開發(fā)工作流程視為繁瑣且優(yōu)先級較低的任務(wù)，但由此帶來的后果往往會在生命周期當(dāng)中出現(xiàn)。

事實上，工程技術(shù)的本質(zhì)就是提升產(chǎn)品水準(zhǔn)、從以往錯誤中總結(jié)經(jīng)驗，而后制定出一套精簡的實施流程。我們應(yīng)當(dāng)將這些原則運(yùn)用到流程當(dāng)中，從而在項目開始時即建立起可供每位開發(fā)者使用的規(guī)則、工具與技術(shù)選項。如此一來，產(chǎn)品本身亦將更加靈活、可擴(kuò)展且易于維護(hù)。

[[175840]]

作為一名前端工程師，我總會在開始新項目前確保工作流程的明確性與組織性。下面，我將與大家分享自己的整個設(shè)計過程。

1. 設(shè)置一套任務(wù)運(yùn)行器

有些朋友可能不太熟悉任務(wù)運(yùn)行器，這實際上就是一種用于自動執(zhí)行重復(fù)任務(wù)的軟件。其適合處理的任務(wù)包括JavaScript壓縮、文件連接、復(fù)制文件/目錄、執(zhí)行腳本以及編譯CSS文件。任務(wù)運(yùn)行器通常立足于命令行，允許開發(fā)者“觀察”特定文件或者目錄的變化，而后在適當(dāng)時運(yùn)行任務(wù)。

在這方面，我個人推薦Grunt與Gulp。關(guān)于二者孰優(yōu)孰劣的問題，恐怕很大程度上取決于使用習(xí)慣。Grunt以配置為核心，較為笨拙緩慢，但卻易于上手且擁有龐大的技術(shù)社區(qū)。Gulp需要更為復(fù)雜的操作流程，但速度卻更好。

下面來看二者的優(yōu)劣總結(jié)：

Grunt

+ 易于上手

+通過配置實現(xiàn)更高控制水平

+發(fā)展歷史更久，社區(qū)規(guī)模更大，插件選項更多

–非流式文件I/O使其速度較慢

Gulp

+ 需要配置的部分較少

+ 處理速度更快

+流式機(jī)制，允許異步文件處理

+ 代碼編寫需求更低

–API較為有限

Grunt與Gulp都運(yùn)行在Node.js之上，因此團(tuán)隊中的每位開發(fā)者都需要首先安裝Node.js。

另外一種適合由任務(wù)運(yùn)行器負(fù)責(zé)的任務(wù)為編譯模板語言，例如Jade。

2. 定義CSS流程

接下來，大家需要選擇一種CSS方法，答案可以是BEM、SMACSS或者Atomic CSS。具體選擇同樣取決于您的個人喜好。我自己使用的是BEM，其易于學(xué)習(xí)且能夠在大型團(tuán)隊中用于高效處理各類應(yīng)用組件。

在決定了CSS的編寫規(guī)則之后，大家應(yīng)當(dāng)考慮如何編寫CSS代碼。結(jié)合當(dāng)下趨勢，大家都在利用Sass或者Less編寫更為簡潔的CSS代碼。然而，CSS4很可能在不久的將來徹底取代這些“語言”。

考慮到預(yù)處理機(jī)制會給構(gòu)建流程增加額外的時間投入，因此應(yīng)當(dāng)討論其是否必要。例如，如果大家選擇使用BEM，則可能不再需要使用Sass或者Less中的嵌套功能優(yōu)勢。

使用Compass等Sass庫能夠顯著提升Sass的功能性，引入包括sprite-map生成、跨瀏覽器混合、文件讀取以及數(shù)學(xué)輔助函數(shù)等，這一切都能讓開發(fā)者在其CSS中實現(xiàn)更多效果。不過需要注意，使用Sass與Compass的前提是要求每位開發(fā)者預(yù)先安裝Ruby。

另外，大家可以利用postcss等JS插件對CSS進(jìn)行后處理。作為可擴(kuò)展插件，postcss允許大家自動根據(jù)瀏覽器支持需求添加瀏覽器前綴、檢查CSS、壓縮文件并生成sprite等。我也在使用postcss，這里向大家強(qiáng)烈推薦。

3. 制定JavaScript規(guī)則

這也是開始新項目中最令人興奮的部分，正確處理亦能夠切實降低后續(xù)的技術(shù)債務(wù)。大家可以整理出一些嚴(yán)格的要求，包括JS如何編寫、使用哪套框架以及設(shè)計模式等。

編寫哪種風(fēng)格的JavaScript？ES 5、ES 6+、TypeScript還是其它？

這是個大問題，而且往往很難找到惟一的正確答案。

ES5

ES5的優(yōu)勢在于，它能夠幫助所有開發(fā)者更為順暢地使用JavaScript，面對易于理解的結(jié)構(gòu)并掌握如何使用各類動態(tài)語言特性。對于經(jīng)驗豐富的開發(fā)者而言，其不會帶來任何學(xué)習(xí)曲線，且全部主流JS MVC框架皆能夠支持ES5。

當(dāng)然，其***缺陷在于迫使開發(fā)者繼續(xù)編寫平淡無奇的陳舊JavaScript代碼。其冗長、松散且面向?qū)ο蟮膫鹘y(tǒng)語言特色使其無法吸引使用C#、Java以及Ruby等語言的開發(fā)者。根據(jù)我的個人經(jīng)驗，JavaScript會給新手軟件開發(fā)者帶來陡峭的學(xué)習(xí)曲線。

“Undefined不是函數(shù)？？這是什么意思？？！”——每位軟件開發(fā)者肯定都有過這樣的疑問。

ES6+

ES6代表著JavaScript的未來——或者會是ES7？總之，利用現(xiàn)代語言標(biāo)準(zhǔn)編寫代碼以應(yīng)對未來需求絕對是個正確的選擇。ES6提供一系列***吸引力的語言特性：類、接口、Lambda函數(shù)、模塊導(dǎo)入/導(dǎo)出功能以及其它多種能夠在“真正的”編程語言中發(fā)現(xiàn)的元素。

ES6的缺點在于，大家仍然需要將代碼轉(zhuǎn)譯為ES5以獲得更為廣泛的瀏覽器、服務(wù)器與操作系統(tǒng)支持。這雖然不是什么大問題，且相信能夠在不久的將來得到解決，但就目前來講其仍在構(gòu)建流程中增加了額外的步驟。另外，其確實會帶來學(xué)習(xí)曲線，但這同時也是提升開發(fā)團(tuán)隊技能水平的好機(jī)會。

TypeScript

TypeScript是微軟針對JavaScript自身不足給出的解決辦法。其優(yōu)勢包括ES6+中包含的一切提升，同時亦面向Visual Studio提供工具，且受到Angular v2的大力支持。TypeScript旨在通過添加更多現(xiàn)代語言特性以實現(xiàn)JavaScript的可擴(kuò)展性，同時幫助開發(fā)者更輕松地立足.NET開發(fā)環(huán)境。

在缺點方面，大家仍然需要將TypeScript轉(zhuǎn)譯為ES5，且面對相關(guān)學(xué)習(xí)曲線。

而這就引發(fā)了下一個問題。

我們該使用哪套JavaScript框架？

目前市面上的JavaScript框架不計其數(shù)，因此我們幾乎很難確定下惟一***的一款。相反，我們在這里選擇了最出色的三種，分別為Angular、Ember與Backbone。三者皆擁有相對悠久的發(fā)展歷史，因此成熟度更高且具備規(guī)?？捎^的社區(qū)資源庫。另外，三者分別采用區(qū)別明顯的方式構(gòu)建應(yīng)用程序。下面來看它們的優(yōu)缺點：

Angular

Angular v2是我個人的首先方案，其具備與Angular v1相同的出色體驗，我也期待著能在下一個項目中使用其***版本。

+ 極高的原型設(shè)計與構(gòu)建速度

+ 為TypeScript與Dart提供說明文檔

+ 可輕松配合Jasmine與Karma實現(xiàn)測試驅(qū)動型開發(fā)

+ 大量獨(dú)有功能

– 大量獨(dú)有功能

– 要求開發(fā)者必須遵循Angular獨(dú)有的方式進(jìn)行開發(fā)

Ember

良好的中間性選項。

+ 組件驅(qū)動型特性

+ 獨(dú)有功能少于Angular，但多于Backbone

+ 使用handlebars模板引擎

+ CLI

+ 可經(jīng)由CLI輕松實現(xiàn)測試

Backbone

老派而又純粹的框架

+ 幾乎不具備任何獨(dú)有功能

+ 可對設(shè)計模式、代碼樣式以及架構(gòu)進(jìn)行全面控制

+ 部分***影響力的應(yīng)用與網(wǎng)站皆運(yùn)行于Backbone之上

+ 可選擇您偏好的模板引擎

+ 基本上屬于簡潔版HTML，無需額外屬性

– 要求使用大量樣板代碼

– 不存在依賴性，但可配合Marionette等視圖框架提升使用體驗

– 總體代碼編寫量要求更高，但亦可借此實現(xiàn)更佳優(yōu)化

– 自帶測試環(huán)境

總結(jié)

通過以上探討，下面我來匯總自己理想中的***前端開發(fā)流程：

• Grunt負(fù)責(zé)任務(wù)運(yùn)行
• Sass負(fù)責(zé)CSS預(yù)處理
• Postcss負(fù)責(zé)后處理
• 編寫TypeScript
• 利用 AngularJS進(jìn)行構(gòu)建

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】