前端工程师的“军火库”

阅读之前

非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^_^。

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

来源： http://lcepy.github.io/2015/07/14/2015%E5%B9%B4%E5%89%8D%E7%AB%AF%E6%8F%90%E9%AB%98%E6%95%88%E7%8E%87%E7%9A%84%E5%B8%B8%E7%94%A8%E5%B7%A5%E5%85%B7/