前端開發相關工具簡要說明

這基本上是個人的前端開發環境配置吧。這里假設了大家都知道一些Linux的常識，也假設大家都知道Git怎么用 了。最近在做的事情是由以前自己一點一點的寫前端業務的方式，轉變到自己提供前端的組件和方法，然后有其他人來完整業務的方式。其實蠻羨慕那些已經做到了 技術提供工具，由運營或者業務來填充內容的團隊。

操作系統

1. 為方便開發之間相互對接調試和測試，建議使用Mac或者Linux等操作系統，不建議使用Windows操作系統。
2. 我自己的電腦目前常用的系統openSUSE Leap 42.1 (x86_64)
3. 我們開發沒有考慮IE，最新版的IE能兼容就兼容，不能兼容我們就強制用戶使用chrome了。

文本編輯器

1. 文本編輯器建議使用Atom,國內鏡像下載地址.

2. 一些Atom前端相關插件

   • angularjs
   • atom-beautify
   • atom-bootstrap3
   • atom-ternjs
   • autoclose-html
   • css-color-underline
   • css-snippets
   • language-nginx
   • linter
   • linter-csslint
   • linter-sass-lint
   • minimap
   • minimap-git-diff
   • pretty-json
   • tabs-to-spaces
   • todo-show

3. sublime是一個非常棒的選擇，當然你需要會使用。

4. 如果有自己熟悉使用的相關工具系列，在保證對代碼format之后能保持風格一致的情況下，自由選用。
5. 一般的我們都不是一個人在戰斗，需要相互之間的協作和配合。

開發構建管理輔助工具系列

Q：做前端的為什么要花費巨大的力氣安裝這些前端亂七八糟的工具？還要耗費精力去學習怎么使用這些工具？還要時刻提防這些工具可能出現bug影響到我們使用的情況。

A：如果只是為了制作一些網頁并且上面再能有一些特效的話。完全可以在項目里面新建一個叫做statics的文件夾，把我們可能需要的jquery、bootstrap、angularjs等等的項目依賴的資源放到里面，然后再新建一個叫做style的文件夾，然后再根據需求寫出對應的樣式，然后發布到web容器里面，查看一下運行結果是否符合要求就好了吧，甚至都不用發布到web容器，本地使用瀏覽器打開對應的html文件，查看一下效果就算完事了吧。 但是，聽說用sass來生成css更容易寫而且更容易維護；如果項目組中某一位開發者為了能使用angularjs 1.5.x的某個新特性將angularjs 1.2.x的沒經過測試直接升級了，而另一個人則只升級到了angularjs 1.4.x；如果在開發過程中你想實時查看樣式效果，你覺得每次都要自己手動刷新瀏覽器里面的頁面特別煩躁；如果你想使用自動測試工具來測試你寫的JavaScript代碼；為了減輕發布之后的網絡請求數量，你想將所有的css合并為一個文件，將所有的JavaScript文件合并為一個文件，然后在正式發布的版本里面去掉各種注釋。等等等等。 這時候就需要很多很多的輔助工具組成一個集合，來幫助我們輕松的完成很多事情。

Git工具使用

1. 項目不相關的文件和文件夾都寫入.gitignore文件。
2. 每次git提交應當寫明git commit信息。
3. 注意分支管理。

Nodejs & npm

Q：nodejs不是用來寫server端服務的東西嗎？nodejs能用來寫前端？

A：我們現在并沒有用到nodejs來直接的寫任何的前端代碼，而且使用nodejs來寫前端的難度也比較大要求比較高，并不適合我們這樣的生產應用。我們開發前端的時候需要安裝nodejs只是為了給我們后續需要用到的工具提供一個運行環境，讓我們的工具能運行起來。就像我們需要執行Python腳本寫的工具需要先安裝Python運行環境一樣。

1. 在Linux中安裝nodejs。Linux有很多的發行版，但是安裝nodejs的原理都是一樣的，都可以通過包管理工具安裝。例如：sudo apt-get install nodejs npm或者sudo yum install nodejs npm或者sudo zypper install nodejs。
2. 在安裝完成nodejs之后執行whereis nodejs,如果結果顯示/usr/bin/nodejs，則需要執行sudo ln -s /usr/bin/nodejs /usr/bin/node,不要問我為什么要執行這一步，當然有一個更好的方案，只是沒有這個簡單粗暴的快而已。
3. 完成之后執行命令node -v查看安裝是否成功。
4. 安裝成功nodejs以及npm之后，就可以下一步了。

yo工具

1. 安裝yo工具，執行命令sudo npm install -g yo。
2. 經過等待之后，執行命令yo --version，可以看見當前安裝的版本。
3. 執行sudo npm install -g generator-angular安裝項目模板。
4. 在需要新建項目的文件夾下面執行yo angular，一步一步的回答問題就可以創建一個項目模板出來了。
5. 然后繼續等待。 yo工具主要用來生成項目模板，這樣我們去新建一個項目的時候就沒必要自己一點點的寫各種煩人的配置了。

Grunt系列

1. 安裝Grunt工具，執行命令sudo npm install -g grunt grunt-cli。
2. 經過等待之后，執行命令grunt --version，可以看見當前安裝的版本。
3. 這個步驟一般只需要做一次就好了，不用每次新建項目都執行這個

Gulp系列

1. 安裝Grunt工具，執行命令sudo npm install -g gulp。
2. 經過等待之后，執行命令gulp --version，可以看見當前安裝的版本。
3. 這個步驟一般只需要做一次就好了，不用每次新建項目都執行這個

Bower工具

1. 安裝Grunt工具，執行命令sudo npm install -g bower。
2. 經過等待之后，執行命令bower --version，可以看見當前安裝的版本。
3. 這個步驟一般只需要做一次就好了，不用每次新建項目都執行這個

其他工具

1. 為了能將sass編譯為css，我們需要node-sass,執行命令sudo npm install -g node-sass。
2. 然后繼續等待。
3. 部分的sass編譯可能需要依賴compass，compass是一個使用ruby寫的工具。一般的Linux系統會默認安裝ruby，但是為了能正常安裝compass，我們需要安裝ruby-devel有的地方被叫做ruby-dev。然后更新一下gem的安裝源地址到taobao。

   gem sources --remove http://rubygems.org/ gem sources -a https://ruby.taobao.org/ 

   然后執行安裝

   sudo gem install compass

4. 安裝完成之后可執行compass --version檢查是否安裝成功。
5. 完成上面幾個安裝，基本上能滿足我們現在的開發需求了。如果開發過程中還需要依賴更多的工具，那就繼續安裝吧。

前后端對接

1. 現在SPA的應用采用的前后端分離的設計。后端有很多的服務，可能分布在不同的主機或者端口之上。
2. 前端靜態頁面服務一般運行在80端口。
3. 為了避免掉跨域請求帶來的麻煩，我們需要一個應用能把不同的服務聚合在一起。

4. 我們在開發和測試環境使用的OpenResty來解決服務聚合這個問題。

    webhost:80/api/v1/a1      ->      apihost1:8080/api/v1/a1
    webhost:80/api/v1/a2      ->      apihost1:9090/api/v1/a2
    webhost:80/api/v1/a3      ->      apihost2:9090/api/v1/a3
    webhost:80/api/v2/a1      ->      apihost3:8080/api/v2/a1
    webhost:80/app1/index.html      ->      statichost:80/app1/index.html

   
   </li>

5. 在開發過程中，我們使用模擬數據在獨立的前端環境里面完成功能和流程開發，這需要事先定義好項目的接口和數據。

6. 前端在完成功能和流程的開發之后，再與后端對接接口數據。這需要前后端雙方都比較熟悉各自的工作方式，需要實現約定好數據格式。
</ol> 來自：http://my.oschina.net/MingjunYang/blog/548009