總結我的2015提升前端效率的方法和工具

更多前端內容http://www.codefrom.com/p/JavaScript

閱讀以前

---

非Mac用戶請自動忽略，此文針對Mac用戶，我我的使用頻率很是高，PC端開發者能夠選擇性的嘗試部分工具。

終端工具

---

安裝homebrew，不裝真對不起本身

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

homebrew

換掉/bin/bash請使用/bin/zsh，安裝oh-my-zsh。

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

oh-my-zsh

使用homebrew安裝tmux

brew install tmux

tmux

安裝vim bundle

git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/vundle

Vundle.vim
安裝nvm來管理node環境

brew install nvm

nvm
安裝Xcode command line tools

xcode-select --install

運行命令後，按照指引，你將完成 Xcode command line tools 安裝
目前我的使用Atom編輯器和vim結合開發」前端」，若是終端版vim使用不習慣，能夠用Macvim（GUI）
Atom

macvim

安裝iTerm 2，你懂的

iTerm 2

我使用Dash來查詢API文檔

Dash

上述終端工具的配置可以使用個人配置文件 | 使用指南

git clone https://github.com/lcepy/icepy.vim.git ~/icepy.vim

cp -r .vimrc ~/

cp -r .vimrc.bundles ~/

cp -r .tmux ~/

cp -r .tmux.conf ~/

cp -r .zshrc ~/

或者

cp -r ~/icepy.vim/* ~/

icepy vim shell conf

使用提示

若是不想使用YouCompleteMe能夠註釋掉，由於此須要Apple LLVM clang編譯器
vim目錄，能夠按F5
在終端輸入tmux，control+b （按一下）而後再按D（注意是大寫），若是想關閉control+b 再按shift+7
使用nvm install v0.12.6 安裝node環境
sudo npm install -g npm （記得更新一下npm）
我使用git來管理個人源代碼
:BundleInstall 或者 vim+PluginInstall+qall 來安裝vim插件

我經常使用的「前端」環境（包括node+mongodb+Hybrid App）

---

我使用TypeScript來編寫JavaScript代碼，它的類型系統，面向對象的方式比較符合個人預期，並且我能在編譯環節就能夠排除錯誤，基本上團隊寫的代碼都同樣，維護起來不會出現JavaScript有一千個哈姆雷特的狀況，何況TypeScript也是下一代Angularjs所採用的。

sudo npm install -g typescript

tsc helloworld.ts

sudo npm install -g tsd

TypeScript

d.ts

我用tsd來處理第三方模塊，這樣才能讓編譯器經過編譯。

node開發環境

forever能夠在後臺啓用node服務，好用。
forever
開發階段使用它無需本身在終端不停的重啓node服務
node-supervisor
調試debug工具
node-inspector
mongodb開發環境

brew install mongodb

配置文件在/usr/local/etc/mongod.conf

systemLog:
      destination: file
      path: /usr/local/var/log/mongodb/mongo.log
      logAppend: true
storage:
      dbPath: /Users/xiangwenwen/mongodb/data
net:
      bindIp: 127.0.0.1

在終端運行mongod —config /usr/local/etc/mongod.conf
tmux session右窗口處運行mongo
瀏覽器端開發環境
主要使用bower來管理個人前端文件，雖然我不寫CSS，可是我依然選擇sassc來編譯，這是C語言寫的編譯器能夠翻譯成CSS。

npm install -g bower

brew install sassc

模塊化和構建工具
關於模塊化和構建工具，三年前使用着grunt和RequireJS，AMD CMD真沒啥好爭論的，一年前一直用着glup，而今年我準備將使用ES6 modules來作模塊化，自動構建工具grunt+glup結合的方式。

npm install -g grunt-cli

npm install -g glup

JavaScript
目前基本上已經全線使用ES5了，因此還要針對IE系列開發的同窗能夠忽略，HTML5特性也大量的在使用中，ES2015會是今年重點學習的方向。
promises管理異步JavaScript是我處理回調的首選選擇。
代碼質量，這個目前基本不作了，由於TypeScript
ESLint
JSCS
客戶端模版
目前我在使用jade，今年開始使用ES2015內置的模版。
調試工具
一個就夠了，chrome tools。
或者option + command + i Atmo調起chrome的調試工具，跟編輯器親密合體。
Hybrid App
目前在使用ionic，嘗試React Native。

npm install -g cordova ionic

ionic
React Native
Hybrid App 調試工具，主要分爲兩個部分，一個是safari，另一個是本身編寫的iOS版調試日誌工具MFLog，能夠嵌入到Hybrid App中，分爲Objective-C和Swift版。
我經常使用的」前端」庫或插件

---

移動版的jQuery
zepto
圖表繪製庫
echarts
工具類函數
lodash
模塊化
webpack
requirejs
大框架
Angular
Angular UI
Angular UI
Cordova Plugins
cordova plugins
動畫庫
famous
構建API
restify
dozerjs
CMS
keystonejs
Express 構建網站
Express
mongoose
mongoose
CSS UI
Bootstrap
Foundation
netease
async
async
hexo編寫博客
hexo
我經常使用的其餘工具
用來編寫Api 契約文檔
apiary
模擬數據
mockjs
查看CSS HTML5的支持狀況
caniuse
研究瀏覽器引擎內核的文獻
瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕 寫在最後，我使用頻率最高的工具是Github^_^。