前端工程师的“军火库”

阅读之前

终端工具

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

换掉/bin/bash请使用/bin/zsh，安装oh-my-zsh。

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"[/code] 
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^_^。

（原标题：总结个人2015提高前端效率的方法和工具）