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

操做系統

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

1. 安裝完成以後可執行compass --version檢查是否安裝成功。
2. 完成上面幾個安裝，基本上能知足咱們如今的開發需求了。若是開發過程當中還須要依賴更多的工具，那就繼續安裝吧。

先後端對接

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

1. 在開發過程當中，咱們使用模擬數據在獨立的前端環境裏面完成功能和流程開發，這須要事先定義好項目的接口和數據。
2. 前端在完成功能和流程的開發以後，再與後端對接接口數據。這須要先後端雙方都比較熟悉各自的工做方式，須要實現約定好數據格式。