前端開發工具和環境搭建

本文說起的全部工具，就算不使用也能正常的完成前端開發工做，不過這些工具的使用可讓你作的更好、更有效、更專業

本文讀者能夠安裝順序來，先安裝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環境安裝

---

window用戶能夠參考這篇文章

下面說的是在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的擴展
• Side​Bar​Enhancements:右鍵菜單擴展
• 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包安裝功能擴展，有了他，再去用這個工具去安裝其餘的包就很方便了，因此必須先裝

packagecontrol官網

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"
}

推薦學習資料

---

• 前端開發工具技巧介紹—Sublime篇
• 經常使用插件推薦
• sublime經常使用快捷鍵