我的前端开发工作流 - 环境篇

有人说过程序员和码农的本质区别就是程序员会不断探索提高生产力的方法。思维模式的转变是提高生产力的最好方式，但打磨我们的工具也是十分有意义的事，本文将从开发环境，自动化开发，开发工具等几个方面针对前端开发效率的提升和代码质量的提高来展开讨论。

每件事都是一个程序，开发也像程序一样，每个步骤都是一段代码，当开发规模随着文档、代码、需求而增加时，重复的步骤变得越来越多。此时，如果可以像抽象代码一样抽象出一些相同操作就可以大大提升开发效率。因此，出现了更多更优质的工具来代替人工做一些不断重复的开发以减少程序员的工作量。

开发环境

Nodejs

首先，需要搭建一个自动化高效率的开发环境。以前我们有shell、java、ruby来进行一些自动化脚本的执行。但自从Nodejs将Javascript带入了服务器，Front End开发环境也发生了翻天覆地的变化。Nodejs不仅仅可以让Jser开发服务端，还让Javascript成为了服务器脚本语言之一，可以用于文件的操作。

安装Nodejs的方法目前来说很简单，点这里下载安装包，选择对应的平台的安装包即可。不过不得不说的是Source Code包，这是源码需要编译，虽然由C++写成，但gyp进行管理，所以编译时需要Python2.6+和C++编译器一起工作。通过命令 node -v 来检验是否安装成功，成功则返回当前版本号。

另外Nodejs还有一样必备的工具npm，就像ruby中的gem一样，是一个Nodejs的包管理器，可以为Nodejs添加一些包。npm的安装非常简单，可以说不用安装，在Linux下只有一行命令： make install , 而Windows和Mac都默认带有npm。当然如果想专门安装npm也是可以的，Linux下仍然是一行代码：

curl https://npmjs.org/install.sh | sudo sh

而Windows会稍微麻烦一点，在https://npmjs.org/dist/下载源码，然后放到和node.exe一个文件夹下即可。

使用npm来安装一些包很简单，使用这样的命令 npm install <package_name> ，一般来说会默认安装在当前目录中。但如果使用参数 -g 就可以安装在全局。另外通过在项目中添加一个 package.json 文件，就可以定义项目依赖的Nodejs包，然后直接在该目录中执行 npm install 指令就会将package文件指定的包全部安装在当前目录。

Shell

不管是Linux还是Mac都天然的拥有Shell环境，但是Windows中的CMD是无法和Shell相提并论的，而且很多开发工具也需要Shell环境。

还好Windows中有MSYS，全称是Minimal GNU（POSIX）system on Windows，它是一个GNU工具集，包括了bash，make，gawk和grep。可以直接下载

http://www.mingw.org/wiki/MSYS

如果需要整个Unix环境和C的库的话，还需要minGW。也可以直接安装Git Bash工具，会附带有这个，这样环境和Git就会一起装好。

http://git-scm.com/downloads

另外在Windows中使用Shell时，有几点需要注意。文件路径的根目录为Git Bash的文件根路径，但是可以使用斜杠和盘符代表Windows的磁盘，比如进入D盘下的workspace文件夹就这样：

$ cd /d/workspace/

而Windows特有的文件夹名称中带有空格的问题可以通过两个方法解决。

$ mkdir /c/"work space"
$ rmdir /c/work\ space

用引号括起来带有空格的文件名或者使用反斜杠来转义空格。

Git

Git的安装很分散，每种平台都不一样，Linux中也分为两种使用yum或者apt-get来安装：

// as Fedora
$ yum install git-core
// as Ubuntu
$ apt-get install git

Mac上是最简单的，在这里安装http://code.google.com/p/git-osx-installer

Windows也很方便，因为有了Msysgit，也一样直接安装。

编辑器

编辑器是每个程序员最常用的工具，它在很大程度上决定了单纯Coding的效率。原来有人将Vim和Emacs奉为上古神器，不过我喜欢新的东西，SublimeText是目前编辑器中的新贵，拥有海量插件，使用Python编写，配置和操作都非常方便。可以到这里下载：

• SublimeText2

现在第3版正在进行beta测试，但是由于升级为Python3，原来的插件都因为API更新的问题而无法使用了，相信在正式版发布后插件将会陆续升级。这是第三版的下载地址，不会覆盖第二版。

• SublimeText3

此外，虽然它是付费软件，不过作者好像从来不怕没有人付费，如果没有注册仅仅会偶尔在保存时弹出Lisence声明，但确认会弹出官方页面，点取消即可。好像还有破解版本的出现，不过作者已经这么大度了，用破解版好像有点说不过去。国内曾经还有人组织过团购，但是作者表示不存在团购一说，只有公司批量购买，最终只有不了了之，售价$70。

浏览器

作为前端最基本的环境，浏览器是必不可少的。Chrome是我最喜欢的浏览器，因为它的快速高效以及很棒的开发者工具。虽然Firefox也是一款出色的浏览器，但Firebug作为一款插件，效率总是差那么一点，当然Firefox现在也推出了自己的调试工具。用于测试的IE浏览器也是常备工具之一，此外还有Opera和Safari。

Chrome和Firefox很强大的一个原因就是，它们对W3C的标准都很快速的支持，许多最新的特性都可以体现在最新版的Chrome以及Firefox中。特别需要一说的是，它们都有一个每日更新的版本，用户可以体验到最新的功能，而浏览器厂商可以获取崩溃信息等反馈来提高品质。Chrome的每日更新版叫Chrome Canary,Firefox的比较直接，Firefox Nightly。

还有一款很神奇的浏览器，它不会渲染，也没有界面，基于Webkit内核，它叫PlantomJS，图标的幽灵和名字都突出了这一特点。也许看起来没什么用，但在测试或者做研究时，浏览器不厌其烦的弹出来时，它就有大用处了。

---

我的前端开发工作流 系列文章：

• 环境篇
• 自动化篇
• 工具篇
• 代码管理篇

原文博客http://www.tychio.net/tech/2013/09/25/improve-workflow.html