本文提及的所有工具，就算不使用也能正常的完成前端開發工作，不過這些工具的使用可以讓你做的更好、更有效、更專業
本文讀者可以安裝順序來，先安裝nodejs和ruby的運行環境，接着把常用的前端開發工具安裝起來。最后我們安裝和配置一下sublime常用的插件。如果讀者發現一些更好的工具可以給我留言，我這里只是拋磚引玉。
本文重點在於環境安裝，具體插件和包的使用可以請教度娘。
node.js環境安裝
node.js這個名字看起來像是一個js庫的名字，實際上差的很遠。簡單的說，nodejs是一個c++寫的一個解釋器，用於把javascript轉換成電腦或服務器上可執行的代碼。一般用來開發服務端代碼或者是作為開發計算機腳本。前端工程師用nodejs主要是因為nodejs環境可以給前端開發帶來方便
安裝
//mac 、linux
=
1：先安裝一個 nvm（ https://github.com/creationix/nvm ） 當然也可以不裝，不過裝了的好處是便於nodejs版本切換
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.2/install.sh | bash
2：安裝 nodejs
$ nvm install 0.12
//查看nvm里面nodejs版本
$ nvm ls
//切換nodejs版本
$ nvm use 0.12
//設置默認版本,否則每次關閉終端再打開就要use一次
$ nvm alias default stable
//windows請訪問主頁下載安裝
http://nodejs.cn/
安裝好了nodejs之后，就會自帶一個npm的包管理工具，可以用它去安裝一些其他的工具
npm常用命令：
//查看版本號
npm -v
//引導你創建一個package.json文件，包括名稱、版本、作者這些信息等
npm init
//安裝包 -g標示安裝在全局 沒有-g標示安裝再本路徑文件夾中
//安裝bower示例
npm install -g bower
推薦閱讀：npm-run自動化任務
ruby環境安裝
下面說的是在mac和linux上搭建ruby環境的推薦方式 mac安裝前要先裝xcode
安裝rvm
$ curl -L https://get.rvm.io | bash -s stable
$ source ~/.rvm/scripts/rvm
$ rvm -v //打印版本號，檢查安裝是否正確
rvm操作
$ rvm list known //查找所有已知版本
$ rvm install xxx //安裝xxx版本
$ rvm list //查看已安裝版本
$ rvm remove xxx //移除xxx版本
$ rvm 2.0.0 --default //設置默認版本
//驗證安裝，打印版本號
ruby -v
gem使用
gem是ruby環境的安裝工具，類似npm，后文中用到npm都是用nodejs安裝的，gem都是ruby安裝的
//查看gem版本
gem -v
//修改下載source地址
$ gem source -r https://rubygems.org/
$ gem source -a https://ruby.taobao.org
$ gem sources -l //驗證成功
推薦前端工程師使用的工具
- bower
- gulp.js
- http-server
bower
前端包依賴和管理工具
安裝： npm install -g bower
教程： - bower解決js的依賴管理
gulp.js
用自動化構建工具增強你的工作流程!
安裝： npm install –global gulp
用法：待補充，先把環境搭起來
http-server
一個輕量級的小型http服務
安裝： npm install http-server
sass
CSS預處理器，讓css寫起來更方便
安裝： gem install sass
常見問題：安裝sass時報錯。 這個問題大多數是因為gem安裝庫被牆導致的。
解決辦法：修改gem安裝包的下載位置，改成taobao的gem下載地址
//查看gem資源地址
gem sources
//修改資源地址
gem sources -r https://rubygems.org //刪除
gem sources -a http://ruby.taobao.org/ //增加
前端工程師的IDE
- sublime text 3
- webStorm
先把這兩個軟件下載后安裝起來.webStorm沒什么好配的，功能和插件基本都很全了。sublime text推薦下載 版本3吧
webStorm是一個很好用的前端開發IDE，功能很全，而Sublime只是一個文本編輯器，他很輕，他可以安裝許多擴展插件，就會有許多好用的功能，后面會說一說sublime推薦安裝的插件。別和我說dreamweaver了，好像這東西只有在校大學生還在用。
sublime推薦插件
推薦插件：
- package control:安裝擴展和管理擴展包
- Emmet:快速寫dom的擴展
- SideBarEnhancements:右鍵菜單擴展
- BracketHighlighter:括號嵌套擴展
- Emmet liveStyle:配合chorme的liveStyle插件使用可以反向會寫css文件
- Pretty JSON:json序列化
- Angluarjs:angluarjs智能提示
- jquery:jquery智能提示
- http requester: cmd+alt:R
- html5
- git
- sass
- less
- SublimeLinter:語法查錯擴展
- SublimeLinter-jshint:語法查錯擴展
- JSFormat
- Theme - Brogrammer:一個好看的sublime主題
- all Autocomplete:全部打開文件的智能提示
- css3
package control
sublime包安裝功能擴展，有了他，再去用這個工具去安裝其他的包就很方便了，所以必須先裝
sublime 3安裝方式：
ctrl + ~:打開命令管理器，輸入命令后執行
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
使用:
mac:command + shift + p 輸入 install ,選擇install package, 然后查找自己想要安裝的包
window:ctrl + alt + p 輸入 install ,選擇install package, 然后查找自己想要安裝的包
安裝好package就用它把之前推薦的插件都安裝一下，具體插件的使用可以請教一下百度君
Theme - Brogrammer
一個好看的sublime主題
Install
Via Package Control
Theme is listed as Theme - Brogrammer in Will Bond's Sublime Package Control.
Manual
Download the .zip
Unzip and rename the folder to Theme - Brogrammer
Copy the folder into Packages directory, which you can find using the menu item Preferences -> Browse Packages... in Sublime Text
Setup
Activate the UI theme and color scheme by modifying your user preferences file, which you can find using the menu item Preferences -> Settings - User in Sublime Text or by clicking cmd + , on a Mac.
Example settings
{
"theme": "Brogrammer.sublime-theme",
"color_scheme": "Packages/Theme - Brogrammer/brogrammer.tmTheme"
}