個人前端開發工做流 - 環境篇

有人說過程序員和碼農的本質區別就是程序員會不斷探索提升生產力的方法。思惟模式的轉變是提升生產力的最好方式，但打磨咱們的工具也是十分有意義的事，本文將從開發環境，自動化開發，開發工具等幾個方面針對前端開發效率的提高和代碼質量的提升來展開討論。

每件事都是一個程序，開發也像程序同樣，每一個步驟都是一段代碼，當開發規模隨着文檔、代碼、需求而增長時，重複的步驟變得愈來愈多。此時，若是能夠像抽象代碼同樣抽象出一些相同操做就能夠大大提高開發效率。所以，出現了更多更優質的工具來代替人工作一些不斷重複的開發以減小程序員的工做量。

開發環境

Nodejs

首先，須要搭建一個自動化高效率的開發環境。之前咱們有shell、java、ruby來進行一些自動化腳本的執行。但自從Nodejs將Javascript帶入了服務器，Front End開發環境也發生了翻天覆地的變化。Nodejs不只僅可讓Jser開發服務端，還讓Javascript成爲了服務器腳本語言之一，能夠用於文件的操做。

安裝Nodejs的方法目前來講很簡單，點這裏下載安裝包，選擇對應的平臺的安裝包便可。不過不得不說的是Source Code包，這是源碼須要編譯，雖然由C++寫成，但gyp進行管理，因此編譯時須要Python2.6+和C++編譯器一塊兒工做。經過命令 node -v 來檢驗是否安裝成功，成功則返回當前版本號。

另外Nodejs還有同樣必備的工具npm，就像ruby中的gem同樣，是一個Nodejs的包管理器，能夠爲Nodejs添加一些包。npm的安裝很是簡單，能夠說不用安裝，在Linux下只有一行命令： make install , 而Windows和Mac都默認帶有npm。固然若是想專門安裝npm也是能夠的，Linux下仍然是一行代碼：

curl https://npmjs.org/install.sh | sudo sh

而Windows會稍微麻煩一點，在https://npmjs.org/dist/下載源碼，而後放到和node.exe一個文件夾下便可。

使用npm來安裝一些包很簡單，使用這樣的命令 npm install <package_name> ，通常來講會默認安裝在當前目錄中。但若是使用參數 -g 就能夠安裝在全局。另外經過在項目中添加一個 package.json 文件，就能夠定義項目依賴的Nodejs包，而後直接在該目錄中執行 npm install 指令就會將package文件指定的包所有安裝在當前目錄。

Shell

不論是Linux仍是Mac都自然的擁有Shell環境，可是Windows中的CMD是沒法和Shell相提並論的，並且不少開發工具也須要Shell環境。

還好Windows中有MSYS，全稱是Minimal GNU（POSIX）system on Windows，它是一個GNU工具集，包括了bash，make，gawk和grep。能夠直接下載

http://www.mingw.org/wiki/MSYS

若是須要整個Unix環境和C的庫的話，還須要minGW。也能夠直接安裝Git Bash工具，會附帶有這個，這樣環境和Git就會一塊兒裝好。

http://git-scm.com/downloads

另外在Windows中使用Shell時，有幾點須要注意。文件路徑的根目錄爲Git Bash的文件根路徑，可是可使用斜槓和盤符表明Windows的磁盤，好比進入D盤下的workspace文件夾就這樣：

$ cd /d/workspace/

而Windows特有的文件夾名稱中帶有空格的問題能夠經過兩個方法解決。

$ mkdir /c/"work space"
$ rmdir /c/work\ space

用引號括起來帶有空格的文件名或者使用反斜槓來轉義空格。

Git

Git的安裝很分散，每種平臺都不同，Linux中也分爲兩種使用yum或者apt-get來安裝：

// as Fedora
$ yum install git-core
// as Ubuntu
$ apt-get install git

Mac上是最簡單的，在這裏安裝http://code.google.com/p/git-osx-installer

Windows也很方便，由於有了Msysgit，也同樣直接安裝。

編輯器

編輯器是每一個程序員最經常使用的工具，它在很大程度上決定了單純Coding的效率。原來有人將Vim和Emacs奉爲上古神器，不過我喜歡新的東西，SublimeText是目前編輯器中的新貴，擁有海量插件，使用Python編寫，配置和操做都很是方便。能夠到這裏下載：

• SublimeText2

如今第3版正在進行beta測試，可是因爲升級爲Python3，原來的插件都由於API更新的問題而沒法使用了，相信在正式版發佈後插件將會陸續升級。這是第三版的下載地址，不會覆蓋第二版。

• SublimeText3

此外，雖然它是付費軟件，不過做者好像歷來不怕沒有人付費，若是沒有註冊僅僅會偶爾在保存時彈出Lisence聲明，但確認會彈出官方頁面，點取消便可。好像還有破解版本的出現，不過做者已經這麼大度了，用破解版好像有點說不過去。國內曾經還有人組織過團購，可是做者表示不存在團購一說，只有公司批量購買，最終只有不了了之，售價$70。

瀏覽器

做爲前端最基本的環境，瀏覽器是必不可少的。Chrome是我最喜歡的瀏覽器，由於它的快速高效以及很棒的開發者工具。雖然Firefox也是一款出色的瀏覽器，但Firebug做爲一款插件，效率老是差那麼一點，固然Firefox如今也推出了本身的調試工具。用於測試的IE瀏覽器也是常備工具之一，此外還有Opera和Safari。

Chrome和Firefox很強大的一個緣由就是，它們對W3C的標準都很快速的支持，許多最新的特性均可以體如今最新版的Chrome以及Firefox中。特別須要一說的是，它們都有一個每日更新的版本，用戶能夠體驗到最新的功能，而瀏覽器廠商能夠獲取崩潰信息等反饋來提升品質。Chrome的每日更新版叫Chrome Canary,Firefox的比較直接，Firefox Nightly。

還有一款很神奇的瀏覽器，它不會渲染，也沒有界面，基於Webkit內核，它叫PlantomJS，圖標的幽靈和名字都突出了這一特色。也許看起來沒什麼用，但在測試或者作研究時，瀏覽器不厭其煩的彈出來時，它就有大用處了。

---

個人前端開發工做流 系列文章：

• 環境篇
• 自動化篇
• 工具篇
• 代碼管理篇

原文博客http://www.tychio.net/tech/2013/09/25/improve-workflow.html