牛牛逼逼叉叉
菜单

前端工程师的“军火库”

2015年08月28日,分类《工具》,作者:
博客捐助

阅读之前

非Mac用户请自动忽略,此文针对Mac用户,我个人使用频率非常高,PC端开发者可以选择性的尝试部分工具。

111901r3d33ki64844xi84

终端工具

安装homebrew,不装真对不起自己

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

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

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

使用homebrew安装tmux

  1. brew install tmux

安装vim bundle

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

安装nvm来管理node环境

  1. brew install nvm

安装Xcode command line tools

  1. xcode-select --install

运行命令后,按照指引,你将完成 Xcode command line tools 安装

目前个人使用Atom编辑器和vim结合开发”前端”,如果终端版vim使用不习惯,可以用Macvim(GUI)

安装iTerm 2,你懂的

我使用Dash来查询API文档

上述终端工具的配置可使用我的配置文件 | 使用指南

  1. git clone https://github.com/lcepy/icepy.vim.git ~/icepy.vim
  2. cp -r .vimrc ~/
  3. cp -r .vimrc.bundles ~/
  4. cp -r .tmux ~/
  5. cp -r .tmux.conf ~/
  6. cp -r .zshrc ~/
  7. 或者
  8. cp -r ~/icepy.vim/* ~/

使用提示

如果不想使用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所采用 的。

  1. sudo npm install -g typescript
  2. tsc helloworld.ts
  3. sudo npm install -g tsd

我用tsd来处理第三方模块,这样才能让编译器通过编译。

node开发环境

forever可以在后台启用node服务,好用。

开发阶段使用它无需自己在终端不停的重启node服务

调试debug工具

mongodb开发环境

  1. brew install mongodb

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

  1. systemLog:
  2. destination: file
  3. path: /usr/local/var/log/mongodb/mongo.log
  4. logAppend: true
  5. storage:
  6. dbPath: /Users/xiangwenwen/mongodb/data
  7. net:
  8. bindIp: 127.0.0.1

在终端运行mongod —config /usr/local/etc/mongod.conf

tmux session右窗口处运行mongo

浏览器端开发环境

主要使用bower来管理我的前端文件,虽然我不写CSS,但是我依然选择sassc来编译,这是C语言写的编译器可以翻译成CSS。

  1. npm install -g bower
  2. brew install sassc

模块化和构建工具

关于模块化和构建工具,三年前使用着grunt和RequireJS,AMD CMD真没啥好争论的,一年前一直用着glup,而今年我准备将使用ES6 modules来做模块化,自动构建工具grunt+glup结合的方式。

  1. npm install -g grunt-cli
  2. npm install -g glup

JavaScript

目前基本上已经全线使用ES5了,所以还要针对IE系列开发的同学可以忽略,HTML5特性也大量的在使用中,ES2015会是今年重点学习的方向。

promises管理异步JavaScript是我处理回调的首选选择。

代码质量,这个目前基本不做了,因为TypeScript

客户端模版

目前我在使用jade,今年开始使用ES2015内置的模版。

调试工具

一个就够了,chrome tools。

或者option + command + i Atmo调起chrome的调试工具,跟编辑器亲密合体。

Hybrid App

目前在使用ionic,尝试React Native。

  1. npm install -g cordova ionic

ionic

React Native

Hybrid App 调试工具,主要分为两个部分,一个是safari,另外一个是自己编写的iOS版调试日志工具MFLog,可以嵌入到Hybrid App中,分为Objective-C和Swift版。

我常用的”前端”库或插件

移动版的jQuery

图表绘制库

工具类函数

模块化

大框架

Angular UI

Cordova Plugins

动画库

构建API

CMS

Express 构建网站

mongoose

CSS UI

async

hexo编写博客

我常用的其他工具

用来编写Api 契约文档

模拟数据

查看CSS HTML5的支持情况

研究浏览器引擎内核的文献

写在最后,我使用频率最高的工具是Github^_^。

(原标题:总结个人2015提高前端效率的方法和工具)



发表评论

电子邮件地址不会被公开。 必填项已用*标注

【上一篇】

Centos 中如何快速定制二进制的内核 RPM 包

【下一篇】

如何让Linux下非root用户程序使用小于1024端口