【转】前端开发流程自动化

【原帖地址】http://www.programmer.com.cn/5770/

 

 

如今前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程上浪费的时间精力也越来越多。精简流程、提高效率，是每一个前端团队都会遇到的问题。大部分前端团队使用Ant脚本进行这一系列流程的自动操作。

使用Ant

Ant主要用于代码构建、打包、部署的自动化操作。早先主要用于Java开发，但由于它具有接口开放、便于配置、Java跨平台等特性，在前端流程自动化方面同样可以发挥强大的功用。

代码检验：Ant + JSLint

JSLint是最常用的JavaScript代码检验工具，它使用JS实现。Ant提供了scriptdef标签，可以直接解析JS脚本，但需要对 JSLint代码进行一些修改，以便于控制台输出。也可以使用jslint4java等开源程序，或通过Rhino等JS解析器方便地进行自动化代码检 验。

文档生成：Ant +JsDoc Toolkit

JsDoc Toolkit是基于JSDoc，使用JavaScript开发的JS文档生成工具。开源工具JsDoc Toolkit Ant Task对JsDocToolkit进行了简单封装，可供Ant调用生成文档。

打包合并：

Ant文件合并可以使用A n t 内置的concat标签实现。代码压缩可用Ant +YUI Compressor实现。

测试环境部署

使用Ant原生的copy标签，可以将本地代码复制到局域网内的ftp目录。也可使用开源工具JSch进行SCP操作。

SVN提交：Ant + SvnAnt

SvnAnt是一个开源工具，提供了SVN、CVS的Ant调用接口，实现了基本所有的版本库操作的Ant调用方法，能方便地进行自动提交。

最佳实践

建立一站式的自动化流程，建议使用单一的Ant构建文件；确保每个子任务的清晰、独立，子任务可以通过添加描述来显示操作进度和信息；Ant配置文件可以在头部定义变量和路径，以便于修改维护；可以使用分支、循环等技巧实现更丰富的自动化
流程控制。

此外， 要注意中文编码， 合并等操作需要通过指定文件编码：encoding=“UTF-8”；有时需要对JS文件中的字符进行ASCII化，可以使用内置的native2ascii标签进行操作。

结语

以上是使用Ant进行前端流程自动化的简单思路，高度集成的自动化操作会产生一些不灵活的情况。例如区分页面、应用的文件打包调用，目前淘宝的许多页面已经使用CDN Combo，用动态合并代替静态打包文件，具体的应用还要视场景灵活选择。

作者简介：刘洋洋 （花名额台），淘宝网前端开发工程师，负责淘江湖及相关产品的前端开发工作。

（本文来自《程序员》杂志11年04期，更多精彩内容敬请关注04期杂志）