前端开发流程自动化

标签: 坊间人语 程序天下事 CTO视点 | 发表时间:2011-04-13 09:18 | 作者:liyn Lee
出处:http://www.programmer.com.cn

文/刘洋洋

如今前端工程师需要维护的代码变得极为庞大和复杂,代码维护、打包、发布等流程上浪费的时间精力也越来越多。精简流程、提高效率,是每一个前端团队都会遇到的问题。大部分前端团队使用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期杂志)

《程序员》11年04期精彩内容:HTML5来临!

《程序员》杂志订阅

相关 [前端 开发 自动化] 推荐:

前端开发流程自动化

- Lee - 《程序员》杂志官网
如今前端工程师需要维护的代码变得极为庞大和复杂,代码维护、打包、发布等流程上浪费的时间精力也越来越多. 精简流程、提高效率,是每一个前端团队都会遇到的问题. 大部分前端团队使用Ant脚本进行这一系列流程的自动操作. Ant主要用于代码构建、打包、部署的自动化操作. 早先主要用于Java开发,但由于它具有接口开放、便于配置、Java跨平台等特性,在前端流程自动化方面同样可以发挥强大的功用.

前端自动化开发工作流模板

- - 氪星人
每种项目都有自己特定的开发流程、工作流程. 从需求分析、设计、编码、测试、发布,一个整个开发流程中,会根据不同的情况形成自己独特的步骤和流程. 一个工作流的过程不是一开始就固定的,而是随着项目的深入而不断地改进,期间甚至会形成一些工具. 例如当年大神们在Linux写C语言,觉得每次编译好多文件好麻烦,就发明了makefile.

前端自动化测试探索

- - FEX 百度 Web 前端研发部
测试是完善的研发体系中不可或缺的一环. 前端同样需要测试,你的css改动可能导致页面错位、js改动可能导致功能不正常. 由于前端偏向GUI软件的特殊性,尽管测试领域工具层出不穷,在前端的自动化测试上面却实施并不广泛,很多人依旧以手工测试为主. 本文试图探讨前端自动化测试领域的工具和实践. 一个项目最终会经过快速迭代走向以维护为主的状态,在合理的时机以合理的方式引入自动化测试能有效减少人工维护成本.

前端优化之图片优化自动化

- jinn - 搜索研发部官方博客
随着前端页面越来越复杂,尤其是一些社区型的页面中,图片成了页面中不可或缺的资源,并且随着产品功能的叠加图片大小越来越多. 以下是几个网站的图片所占的比重. 由于图片是二进制文件,并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小. 所以图片优化主要是选择合适的图片格式,在不降低图片质量的情况下去掉图片里的元数据信息.

关于前端测试bug分类和自动化技术选型的想法

- - Taobao QA Team
下面按照现象和成因分解了前端相关bug,方便后面进行定位. 一部分和前端后端都相关的问题也列举了进来. 这些bug都是实际遇到过的,前端问题五花八门,期待大家共同维护这个mm图. 2常用前端测试相关工具. Fiddler:无差别跟踪每一个请求,可以重定向方便调试;. IE调试器(companion.js等):安装时需要先安装 Microsoft Script Debugger 然后再安装 CompanionJS安装后需要将IE设置中的禁用脚本调试(Internet Explorer)禁用脚本调试(其他)这两个选项去掉.

前端开发大众手册

- Ran - FeedzShare
来自: xilo's blog - FeedzShare  . 发布时间:2009年03月09日,  已有 3 人推荐. 一直觉得前端开发缺个手册,这是个体力活. 今天闲来无事,把一些工具(online和client的)、常用网址、以及经验总结等罗列出来和大家分享下. 这个标题起地大了点,肯定会有很多地方没列到,包括类目的分法也可能考虑不周,所以还请大家积极补充指正,可以直接留言,也可以发邮件给我.

前端开发 – 我们的职业

- aoao - 崔凯,前端开发
写给“正在纠结”、“准备纠结”的前端开发们,希望对大家求职有所帮助:. 很多人提出薪资要求的时候,会说:“现在房租是多少多少、吃饭要多少多少、泡妞会多少多少”,所以,至少拿多少多少的工资,才满足自己的需求. 如果说这些话的人,已经是公司的老员工,和老板私人关系很不错,那这么讲还凑合. 但如果是职场新人,首次过来应聘,谈这些就很不在点上.

CssGaga:前端开发和部署利器

- Anew - 前端观察
涛哥@ytzong 开发的cssgaga用了好久,确实是个好工具,早想把它推荐给大家用了. 今天就做个简介,涛哥网站有详细的介绍,这里不多说. (工作量)一般都能减少20%以上吧,没怎么统计. 一个极端的例子:某人使用了CssGaga后从原来早9点到晚11点下班,午休都在做到现在晚5点半下班,中午还能看一部完整电影 (via twitter).