总结个人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^_^。