Web前端开发流程自动化

如今前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程上浪费的时间精力也越来越多。精简流程、提高效率，是每一个前端团队都会遇到的问题。因此我们需要在前端开发过程中引入流程管理工具来提升我们的开发效率。

前端的开发过程中主要有以下流程： 编写代码->单元测试->检查语法->整合代码->生成文档->压缩代码->部署测试环境->测试->发布。

流程管理工具 - Ant

Ant 是著名Java开源组织Apache的一个项目，是一个基于java的build工具。它可以使你通过ant脚本语言，自动你的项目拷贝到某个目录，发布项目，或者生成一些代码，执行SQL语言。总之它可以帮助你完成项目开发中除了开发代码以外的大部分辅助性工作。

虽然Ant更多的在Java开发中使用，但是我们在前端开发中也可以很方便使用Ant来管理哦我们的开发流程。

单元测试

单元测试可以在我们每次对代码做修改时都跑一遍测试来看看是否引入了了Bug，详见JavaScript单元测试框架介绍。

代码检查 - JSLint

JavaScript 作为一门年轻、语法灵活多变且对格式要求相对松散的语言，代码格式的混乱和某些语言特性的不正确使用，往往使得最终交付的产品中包含许多因编码风格约定造成的未预见的行为或错误，这种习惯性的问题如果不及时指出并修改，往往会在项目的迭代过程中不断的重现，严重影响 Web 产品的稳定性与安全性。JSLint 正是 Douglas Crockford 同学为解决此类问题创建的工具，JSLint 除了能指出这些不合理的约定，还能标出结构方面的问题。虽然 JSLint 不能保证代码逻辑一定正确，但却有助于发现错误并教会开发人员一些好的编码实践。值得一提的是 JSLint 工具本身也是一段 JavaScript 代码，它是检验 JavaScript 代码质量的 JavaScript 脚本。

使用方法

JSLint本身是用JavaScript编写的，你可以在浏览器里调用它，也可以在各个编辑器里直接集成，比如Notepad++可以安装JSLint插件，但是以上这些方法都是手动调用的，比较麻烦。下面我们看看如何和Ant进行集成。

和Ant进行集成主要有2种方法：jslint4java或者通过Rhino等JS解析器方便地进行自动化代码检验。具体的使用方法请参考：使用 JSLint 保证 JavaScript 代码质量

对于前端开发中来说可能使用jslint4java更方便一些，毕竟不用写JAVA代码，这里需要提一下的是可以使用jslint4java-ant帮助我们JSLint的Ant任务。

除了JSLint，我们也可以选择Closure Linter，Google开发的js代码检查工具，它能够检查代码风格，语法错误，还能够自动优化代码，功能十分强大。

文档生成 - JSDoc 3

JSDoc 3是JsDoc Toolkit的升级版本，你可以理解它为JS版的JAVADoc。它会从源码中提取注释生成文档，注释的规范请参考:use JSDoc，或者Google JavaScript Coding Style，因为谷歌的JavaScript style是基于JSDoc的。

JSDoc和Ant集成的话需要下载JSDoc 3和JSDoc3 Ant Task，其中JSDoc3 Ant Task是方便你在Ant中使用JSDoc3。实际上JSDoc3 Ant Task的下载包里包含了JSDoc 3和Rhino，可以直接使用。

文件整合

在开发阶段常常会把JavaScript文件和CSS文件分成几部分来写,比如每个人对应一个文件，这样有利于减少冲突，提高效率。当然我们还会引入大量的第三方库文件，如jQuery, jQuery UI等。但是从性能优化的角度来看，每个文件都是一个HTTP请求，尤其JavaScript是顺序加载的，会严重影响网页的加载速度。因此在代码部署时必须将多个文件合并成少数几个文件。

和Ant集成的常用工具主要有Ant concat标签以及Combiner。

因为Ant concat是Ant内置的标签，所以使用起来特别简单方便，以下是最简单的例子，将所有的js合并到all.js中去。详细用法参考Ant concat。

        <target name="concatenate">          <concat destfile="all.js">              <fileset dir="js" includes="*.js" />          </concat>        </target>      

Combiner是Zakas开发的一个文件整合工具，它通过判断文件的依赖关系将文件进行合并。详细用法参考：文件整合工具－Combiner。

代码压缩

开发时为了让代码具有良好的可读性，一般都加入了大量的空格和空行，类名和变量名都一般都较长，这些都导致了源代码的体积较大，增加客户端下载时间，因此部署时需要对JavaScript代码和CSS代码进行压缩处理。例如jQuery1.8.3压缩后是91KB，没有压缩则是252KB，还是非常值得去压缩的。

最常见的压缩工具YUICompressor以及Google的Closure Compiler。下面是一些两者的比较：

• YUICompressor只执行基本压缩，主要是去除空格等，也可以执行一些比较低层次的优化，比如将var varName;改成var a;
• Google Closure Compiler功能比较强大，除了基本的压缩，还可以对代码进行初级和高级的优化，比如去除dead code等，可以通过参数来控制它的压缩级别。总之它压缩出来的代码结构被彻底修改了。
• YUICompressor因为对源代码优化做的比较少，所以比较可靠，不会给代码带来伤害。而Google Closure Compiler比较激进，可以取得较高的压缩率，但是可能带来伤害。
• Google Closure Compiler不仅可以对代码进行压缩，还可以对代码进行合并，见上面文件整合部分。

两者的详细比较见Google Closure Compiler VS YUICompressor

YUICompressor和Google Closure Compiler与Ant集成的教程可以参考http://www.36ria.com/4644

测试环境构建

测试环境构建不是单元测试，而是构建整个系统的测试环境，例如将系统构建包复制到测试机器上等。使用Ant自带的ftp标签，可以将本地代码复制到局域网内的ftp目录。也可使用开源工具JSch进行SCP操作。

        <ftp server="ftp.apache.org"           userid="anonymous"           password="[e-mail]">          <fileset dir="htdocs/manual"/>        </ftp>      

自动提交代码

很多时候需要按照一定的规则自动提交代码，比如每天定时构建，然后提交到SVN或者当Ant和CI集成时，需要Ant和SVN交互等，这时候使用Ant和SVN交互，实现自动化操作是非常方便的。

Ant和SVN交互需要插件svnant，它可以完成export, checkout, commit操作。

Ant同样是可以和Git交互的，请参考Ant Tasks for Git。

案例参考： 基于 Ant 搭建敏捷开发过程中的持续集成环境

参考：

• 前端开发流程自动化
• Automating JavaScript builds
• tangram开发中使用的开源工具介绍
• Build-JS-example

如需转载，请注明来自: BorisHuai前端修炼 > Web前端开发流程自动化