前端工程師養成記：開發環境搭建(Sublime Text必備外掛推薦)
為了讓自己更像一個前端工程師，決定從開發環境開始武裝自己。本文將介紹前段工程師開發的一些利器的安裝步驟，主要包括了：
1.Node.js的安裝
2.Grunt的安裝及常用外掛
3.Sublime Text的安裝及必備外掛
一.Node.js的安裝
Node.js就是一堆前端工程師捧紅的，所以裝上這個嘛，主要不是自己需要使用Node.js而是一堆工具對他的依賴。
Windows下安裝步驟很簡單：
1.去到http://nodejs.org/下載最新的安裝包，安裝。
2.在CMD下執行，node和npm看看能否執行成功，如果不行就檢查下PATH的設定。
3.有個非常好用的東西值得全域性安裝anywhere，可以在任何目錄啟動一個web服務，手機除錯頁面必備。
二.Grunt的安裝
Grunt是目前用的比較多的構建工具，寫Java的都知道Maven，這玩意兒就是Javascript界的Maven。裡面有各種外掛非常實用。
1.在CMD下執行：npm install -g grunt-cli
2.試下能不能在CMD下執行：grunt，可能會報錯，沒關係因為沒有配置檔案。
正常的一個專案構建的流程通常是先在程式碼根目錄下面，建立了package.json和Gruntfile.js，之後先執行npm install然後再執行grunt就可以完成專案的構建了。
下面介紹一些前端常用的Grunt外掛：
grunt-cli 這個就是命令列
grunt-contrib-clean 這個用於build前的清理工作
grunt-contrib-concat 這個用於拼接檔案
grunt-contrib-copy 這個用於拷貝檔案
grunt-contrib-cssmin 這個用於壓縮css
grunt-contrib-uglify 這個用於壓縮js
grunt-contrib-htmlmin 這個用於壓縮html
可以看下我的開源專案Tiny-Alert基本上展示了一個最簡單的配置。https://coding.net/u/shootyou/p/Tiny-Alert/git
三.Sublime Text的安裝及必備外掛
沒用Sublime之前以為這黑不拉幾的玩意兒有啥好玩的，自己用了才知道，這玩意兒真不是用來裝逼的，用熟了至少提高前端工程師一倍的效率，敲程式碼那叫一個快。
1.安裝Sublime Text 3: http://www.sublimetext.com/3
2.破解什麼的自行補腦
3.安裝package control
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())開啟sublime text 3，按ctrl+`或者選單View > Show Console開啟命令視窗，貼上以上程式碼並回車即可。
然後就開始幸福生活了，Ctrl+Shift+P喚起，這個玩意兒是萬能的，你想要啥都在這輸入下就行了。輸入：Install，選擇Install Package，然後輸入下面外掛的名字搜尋就行了。
必備外掛：
AutoFileName：自動補全檔名
Emmet：神器啊，花10分鐘學學語法，讓你提升10倍編碼速度：http://blog.wpjam.com/m/emmet-grammar/
Go-To-Css-Declaration：跳轉到css的定義處
JsFormat：格式化js程式碼
Tag：貌似是可以補全和格式化html標籤
Themr：主題選擇
Autoprefixer：自動新增瀏覽器相容字首
CodeFormatter：程式碼格式化
ConvertToUTF8：解決中文編碼問題
SublimeLinter：程式碼提示高亮
Terminal：喚起終端控制檯