為了讓自己更像一個前端project師，決定從開發環境開始武裝自己。

本文將介紹前段project師開發的一些利器的安裝步驟，主要包含了：

1.Node.js的安裝

2.Grunt的安裝及經常使用插件

3.Sublime Text的安裝及必備插件

一.Node.js的安裝

Node.js就是一堆前端project師捧紅的，所以裝上這個嘛，主要不是自己須要使用Node.js而是一堆工具對他的依賴。

Windows下安裝步驟非常easy：

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之前以為這黑不拉幾的玩意兒有啥好玩的。自己用了才知道，這玩意兒真不是用來裝逼的，用熟了至少提高前端project師一倍的效率，寫程序那叫一個快。

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：喚起終端控制臺

總結

以上是生活随笔為你收集整理的前端project师养成记：开发环境搭建(Sublime Text必备插件推荐)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。