前端開發環境介紹

在過去的幾年時間里，出現了許多全新的網頁應用程序，不過，由于應用程序的功能越來越豐富，也導致了前端開發的復雜度大幅增加。

現在也有不少前端開發工具，比如Backbone和EmberJS框架都能提供穩定的App開發解決方案。同時，Javascript的應用也越來越常廣泛，而且它還能和Node.JS在后端協同工作，快速搭建易于擴展的網絡應用。實際上，為了應對前端開發復雜度所帶來的挑戰，開發人員創建了許多工具來簡化開發流程。從測試框架，到分析工具，前端開發工具已經非常成熟了，正是得益于這些有用的工具才讓用戶體驗到最佳的互聯網服務。

Chrome瀏覽器

這是目前最好的前端開發工具。自從其誕生以來，Chrome在其開發者工具中投入了大量精力，而且直到現在，谷歌仍在不斷優化這些工具。一般而言，谷歌會在每六周發布對Chrome開發者工具的優化，并推出一些全新功能。

Grunt

Grunt在任務自動化中很有用，它是一個基于任務的JavaScript命令行構建工具，支持捆綁任務插件。此外，Grunt是可擴展的，開發人員可以按照自己的需要編寫不同的任務，而且Grunt支持將多任務整合在一起，提供更強大的功能。

每天你會在鍵盤上點擊多少次“刷新”鍵呢？很多次吧。LiveReload是一個簡單的網頁協議，可以觸發事件到客戶端，無論文件什么時候被改動，客戶端都能及時刷新、處理事件。

LiveReload

反復測試有沒有讓你覺得想吐？通常情況下，如果在前端開發的初始階段沒有設計好測試，那么后面的工作往往會變得非常困難。幸運的是，我們有不少優秀的測試框架，它們就像之前使用過的那些開發語言一樣強大。目前主流的兩個測試框架就是Jasmine和Mocha。

前端開發環境安裝與配置

前端開發，我們主要使用Angular JS框架來開發JavaScript代碼，CSS樣式表我們使用Less進行開發，而開發環境則使用Gulp進行包管理和批處理編譯。

軟件安裝

Node.js

去官網下載并安裝， https://nodejs.org/dist/v5.10.1/node-v5.10.1-x64.msi （若是Mac/Linux，選擇對應版本下載）

安裝在任意目錄下，安裝好之后運行Node.js command prompt，輸入node -v 命令，顯示node.js版本號即安裝成功

Sublime Text 3

去官網下載并安裝，http://www.sublimetext.com/3 ，安裝完成后自行搜索激活碼激活即可

Sublime Text 插件

使用Package Control組件安裝

1、按 Ctrl + ` 調出console（注：安裝有QQ輸入法的這個快捷鍵會有沖突的，輸入法屬性設置-輸入法管理-取消熱鍵切換至QQ拼音）

2、輸入以下代碼并回車

import urllib.request，os; pf = ‘Package Control.sublime-package’;

ipp = sublime.installed_packages_path（）;

urllib.request.install_opener（ urllib.request.build_opener（ urllib.request.ProxyHandler（）） ）;

open（os.path.join（ipp， pf）， ‘wb’）.write（urllib.request.urlopen（ ‘http://sublime.wbond.net/’ + pf.replace（‘ ’，‘%20’））.read（））

3、 重新啟動Sublime Text 3

4、若在Perferences-》package settings中看到package control這一項，則表示安裝成功。

5、按下Ctrl + Shift + P調出命令板

6、輸入install調出Install Package選項并回車，然后在列表中選擇需要的插件進行安裝

建議安裝以下插件

Angula JS ： AngulaJS代碼提示

Doc Blockr：注釋生成器，當我們使用/**的時候會自動加入注釋模板

Emmet：HTML快速開發插件

Side Bar：左側欄

Convert To UTF-8：當我們打開非UTF-8的文檔的時候，會自動轉換成UTF-8

HTML/CSS/JS Prettify：代碼格式化插件

Git客戶端

官網下載并安裝，https://git-scm.com/download/win

IIS WEB服務器

這是Windows系統自帶的，安裝與配置方法參考http://jingyan.baidu.com/article/eb9f7b6d8410ab869364e835.html

IDE配置

安裝Gulp

安裝Gulp之前，先把npm升級到最新版本（npm是Node.js的包管理工具，在Node.js安裝的同時已經被安裝了，可以直接使用npm命令）

打開Node.js command prompt，輸入命令npm install npm -g

接著配置npm的全局路徑

Windows下的Nodejs npm路徑是appdata，可能不是我們想要的路徑，可以改成我們指定的路徑方便管理。

在cmd下執行以下命令

npm config set cache “X：xxxxx ode_cache”

npm config set prefix “X：xxxxx ode_global”

如果命令無效，可以去nodejs的安裝目錄中找到node_modules pm pmrc文件，這個文件存放npm的userconfig配置。

修改如下即可：

prefix = X：xxxxx ode_global

cache = X：xxxxx node_cache

建議配置在node.js的安裝路徑下，（我的node.js安裝在E：web-dev ode.js，后續內容都發生在此路徑或者E：web-dev下）

在E：web-dev 下新建個文件夾，任意取名，這個文件夾即開發工程根目錄（我取名為learning）

1、全局安裝

打開Node.js command prompt，進入learning路徑，輸入命令npm install -g gulp

安裝完畢后輸入gulp -v，如果提示不是內部或外部命令，說明沒有配置系統變量path，手動去配置pasth，地址是prefix的地址。

2、本地安裝

輸入命令npm init，初始化Node環境，根據實際情況填寫內容

輸入命令npm install gulp -save-dev

3、安裝gulp相關插件

首先安裝 npm install –save-dev gulp-load-plugins

后面選擇自己需要的安裝，這里我安裝了以下插件

npm install –save-dev gulp-rename 用來重命名文件流中的文件

npm install –save-dev gulp-uglify 用來壓縮js文件，使用的是uglify引擎

npm install –save-dev gulp-minify-css 要壓縮css文件時可以使用該插件

npm install –save-dev gulp-minify-html 用來壓縮html文件

npm install –save-dev gulp-jshint 用來檢查js代碼

npm install –save-dev jshint 安裝了gulp-jshint，一定要同時安裝jshint

npm install –save-dev gulp-concat 用來把多個文件合并為一個文件，我們可以用它來合并js或css文件等，這樣就能減少頁面的http請求數了

npm install –save-dev gulp-less less使用gulp-less

npm install –save-dev gulp-sass sass使用gulp-sass

npm install –save-dev gulp-imagemin gulp-imagemin插件來壓縮jpg、png、gif等圖片

npm install –save-dev gulp-livereload 當代碼變化時，它可以幫我們自動刷新頁面

該插件最好配合谷歌瀏覽器來使用，且要安裝livereload chrome extension擴展插件

npm install –save-dev gulp-htmlhint 校驗HTML語法

npm install –save-dev gulp-sourcemaps CSS Source Map生成

npm install –save-dev gulp-notify 通知欄（出錯后會在Windows右下方提示錯誤）

npm install –save-dev gulp-plumber 錯誤處理兼容

插件安裝完畢后在工程根目錄下的package.json文件里能看到，如圖

安裝Bower

首先初始化Bower配置文件，進入learning路徑（E：web-devlearning），輸入命令bower init即可，和gulp的init類似，按實際情況填寫，其中有4個問題提示，分別輸入y、y、n、y。

輸入命令安裝Bower： npm install bower -g

注：Bower的作用主要是管理我們需要的開發包，例如Angula JS、jQuery等等。

配置開發依賴包路徑

Bower的作用是來管理開發包，所以需要對開發包的路徑做個配置

在根路徑下建一個.bowerrc文件，并寫入內容，如圖所示

配置批處理任務

此時需要把工程目錄創建好，工程目錄如圖

其中dist目錄下存放的是最終編譯生成的文件，src目錄下存放的是開發編輯的文件

在根路徑下（E：web-devlearning）新建個js文件，gulpfile.js，文件內容如圖

在命令行下執行命令 gulp，不輸出錯誤信息以及一直處于等待狀態即為配置成功

后續在src下的js、css里編寫完代碼后，在根路徑命令行下執行gulp命令，在dist下的js、css里會生成對應的編譯文件

開發環境配置

在這里實際上就是使用Bower來安裝開發包

打開Node.js command prompt，進入工程根路徑（E：web-devlearning），安裝所需要的開發包，我安裝的開發包如下

bower install –save angularjs

bower install –save angular-animate

bower install –save echarts

bower install –save jquery

bower install –save sparkline

bower install –save ng-stomp

至此，前端環境已安裝配置完畢，可根據自己需要修改工程的開發目錄