前端开发流程自动化
- Lee - 《程序员》杂志官网如今前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程上浪费的时间精力也越来越多. 精简流程、提高效率，是每一个前端团队都会遇到的问题. 大部分前端团队使用Ant脚本进行这一系列流程的自动操作. Ant主要用于代码构建、打包、部署的自动化操作. 早先主要用于Java开发，但由于它具有接口开放、便于配置、Java跨平台等特性，在前端流程自动化方面同样可以发挥强大的功用.
前端开发流程自动化
标签：
坊间人语
程序天下事
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期杂志）
相关 [前端 开发 自动化] 推荐：
前端自动化开发工作流模板
- - 氪星人每种项目都有自己特定的开发流程、工作流程. 从需求分析、设计、编码、测试、发布，一个整个开发流程中，会根据不同的情况形成自己独特的步骤和流程. 一个工作流的过程不是一开始就固定的，而是随着项目的深入而不断地改进，期间甚至会形成一些工具. 例如当年大神们在Linux写C语言，觉得每次编译好多文件好麻烦，就发明了makefile.
前端开发中的流程自动化与提效实践
- - Joe’s Blog随着前端的发展，越来越多的工具库、方法被用在日常研发流程中，这大大提升了业务开发的效率，而随着各类自动化流程的建设，开发同学也不再需要关注到每一个细节. 前段时间项目阶段性交付，在推进的过程中也做了不少尝试，虽然从长期看，这类工作最后可能都该收敛到基础设施部门或者标准的自动化流程中去，但并不妨碍我通过实践来落实一些对项目开发的思考和想法.
前端自动化测试探索
- - FEX 百度 Web 前端研发部测试是完善的研发体系中不可或缺的一环. 前端同样需要测试，你的css改动可能导致页面错位、js改动可能导致功能不正常. 由于前端偏向GUI软件的特殊性，尽管测试领域工具层出不穷，在前端的自动化测试上面却实施并不广泛，很多人依旧以手工测试为主. 本文试图探讨前端自动化测试领域的工具和实践. 一个项目最终会经过快速迭代走向以维护为主的状态，在合理的时机以合理的方式引入自动化测试能有效减少人工维护成本.
Puppeteer前端自动化测试实践
- - SegmentFault 最新的文章本篇内容将记录并介绍使用Puppeteer进行自动化网页测试，并依靠约定来避免反复修改测试用例的方案. 主要解决页面众多时，修改代码导致的牵连错误无法被发现的运行时问题. 目前我们在持续开发着一个几十个页面，十万+行代码的项目，随着产品的更迭，总会出现这样的问题. 在对某些业务逻辑或者功能进行添加或者修改的时候（尤其是通用逻辑），这些通用的逻辑或者组件往往会牵扯到一些其他地方的问题.
前端优化之图片优化自动化
- jinn - 搜索研发部官方博客随着前端页面越来越复杂，尤其是一些社区型的页面中，图片成了页面中不可或缺的资源，并且随着产品功能的叠加图片大小越来越多. 以下是几个网站的图片所占的比重. 由于图片是二进制文件，并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小. 所以图片优化主要是选择合适的图片格式，在不降低图片质量的情况下去掉图片里的元数据信息.
GitLab-CI：从零开始的前端自动化部署
- - DockOne.iogitlab-ci&&自动化部署工具的运行机制. 1、通过在项目根目录下配置.gitlab-ci.yml文件，可以控制CI流程的不同阶段，例如install/检查/编译/部署服务器. GitLab平台会扫描.gitlab-ci.yml文件，并据此处理CI流程. 2、CI流程在每次团队成员push/merge后之后触发.
前端工程师用Node.js + Appium实现APP自动化
- - 掘金 前端最近在使用Appium做爬虫功能，网上全是python + Appium的教程，Appium也支持Node.js开发，作为前端工程师使用 Node.js + Appium实现了自动化爬虫功能. 零零散散折腾了小两天的时间，踩了一些小坑，把流程和坑点整理出来供大家参考，希望让大家少踩坑、快速实现功能.
关于前端测试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的)、常用网址、以及经验总结等罗列出来和大家分享下. 这个标题起地大了点，肯定会有很多地方没列到，包括类目的分法也可能考虑不周，所以还请大家积极补充指正，可以直接留言，也可以发邮件给我.