Grunt这货是啥？
最近很火的前端自动化小工具，基于任务的命令行构建工具
Grunt能帮我们干啥？
在开始介绍前，先向大家描述下面的场景:
【场景1：项目开始前】
先建立一个 projA 的文件夹 再建 html css js images （建5个或以上文件夹，花费1分钟）
拷贝 CSS库（Yui Reset | bootstrap）JS库（Requiet.js | Seajs | jQuery | jQuery插件 ） 进相应目录（拷贝 N个文件，花费N分钟）
再新建 html/index.html js/comm.js css/base.css css/comm.css css/module-A.css && （建N个文件，花费N分钟）
【场景2：编码中】
编辑器编码 =& 切换到浏览器F5 =& 编辑器编码 =& 切换到浏览器F5 =& 编辑器编码 =& 切换到浏览器F5 =& 编辑器编码 =& 切换到浏览器F5 &&&&
键盘就这样杯具了&.
【场景3：编码完成】
HTML去掉注析、换行符 - HtmlMin
CSS文件压缩合并 & CssMinify
JS代码风格检查 & JsHint
JS代码压缩 & Uglyfy
image压缩 - imagemin
在一个项目过程中，重复而枯燥的工作太多了&. 绳命就这样浪费了。
我们需要一个自动化的工作流程，让我们更专注于coding，而不是coding外的繁琐工作。于是Grunt应运而生。可以想像，如果在node环境下，一行命令搞定一个场景，So Cool&
Grunt安装配置
安装 grunt-cli
1. 自备node环境(&0.8.0), npm包管理
2. 卸载旧版本grunt（&0.4.0） (没装过请忽略)
npm uninstall grunt -g
安装grunt-cli
npm install grunt-cli -g
安装 grunt-init(可选)
npm install grunt-init -g
可选安装，grunt-init是个脚手架工具，它可以帮你完成项目的自动化创建，包括项目的目录结构，每个目录里的文件等。具体情况要看你运行grunt-init指定的模板，以及创建过程中你对问题的回答。由于篇幅且配置 grunt-init 模板较为复杂，本章暂不展开讨论，有兴趣的童鞋可私下了解。
配置 grunt
从官网下载package.json Gruntfile.js 文件放到项目根目录，并对文件进行修改配置.
package.json //项目自动化所依赖的相关插件。
Gruntfile.js //项目自动化工作流配置文件，重要
1. package.json 文件修改
2. Gruntfile.js 文件修改
开始一个实例
这里以projA为例子，实现的自动化功能如下：
编码过程中自动监控projA目录，如果 .html/ .css/ .js文件变更时，自动刷新浏览器。
编码完成后，压缩html、css、js、img文件,并存放到dist/目录下。
对应的操作步骤如下：
1. 先配置好package.json、Gruntfile.js两个文件，
2. 执行命令自动下载相对应的Grunt插件命令行执行:
npm install
3. 启动文件变更监控(livereload)命令行执行:
grunt live
4. 编码完成后Build命令行执行:
grunt build
Grunt使用总结
1. 配置简单，配置文件Gruntfile.js是JS格式，比较贴近前端知识点。相对Ant之类基于JAVA,又是xml配置，相对来说学习成本低。
2. Grunt能为我们做的远不只这么多,很多Grunt插件待我们去挖掘使用。比如：haml less coffeeScript dataURI html2json
3. 每个人的具体需求不一样，可以按自己的习惯合理配置，组合成最适合自己的自动化工作流。
4. Grunt团队很勤劳，社区活跃，有兴趣可以持续关注。
分享到 & 　　
LAST WORKS
ideas第09期
Webpage Designed by TGodeas-腾讯游戏官方设计团队
Copyright & 2011. All Rights Reserved.如何进行前端自动化测试？ - WEB前端 - 伯乐在线
& 如何进行前端自动化测试？
此文章转自我在
上的同名问答
前端测试是前端工程方面的重要分支，有过一些探索，这里简单分享一下。
首先，还是要强调一点：
前端是一种特殊的GUI软件
看过我最近一年内做前端工程方面相关分享的人可能有印象，我总是在强调这一点。前端测试也跟这个理论基础有所关联。
在这里，我还想吐槽一下：
API测试方法论在测试GUI时并不能解决所有问题。
与很多前端工程师讨论过前端测试，大家更多的还是盯着API测试方法论。诚然，前端有那么一小部分代码是可以用API测试保证质量的，但前端项目中的绝大多数代码是GUI界面，前端测试应该向传统GUI测试方法论需求解决方案： ，这个百科词条介绍的很不错，大家可以感受一下GUI测试相关概念和方法。它的测试用例、覆盖率统计、测试方法等等都与API测试有着很大的不同。
统一了这个认知之后，我们来讨论一下前端GUI测试的特殊性。根据百科词条上的那些介绍，相信大家都能感觉到GUI测试的成本非常高，而前端这种特殊的GUI软件，具有天生的快速迭代特征，这使得case维护成本也变得非常高，经常跟不上迭代速度。
一个标准的互联网应用产品的前端部分，我粗略估计大概有20%的业务基础代码比较稳定，比如通用组件、通用算法和数据模块等，可以针对这些建立复杂一些的API和GUI测试用例来保证质量。剩下80%的部分不是很稳定，每天都在迭代，针对他们维护case的成本非常高。目前业界中号称做了自动化测试的项目，也大多是在做那稳定的20%。
关于稳定部分的单元测试方法我这里就不赘述了，
的答案给出了很多关键字，有兴趣的去搜索就好了。我想讨论的是针对剩下80%不稳定部分的工程化测试方案。据我了解，前端测试面对这些问题还是很无力的，业内大部分团队还是靠堆人解决。
面对这种现状，我其实也没想到过什么好的方法，基本原则就是：
以最低的成本建立和维护自动化测试用例。
到目前为止，就想到过两个方案（都不是测试方案，只是回归测试辅助）：
1. 不太靠谱的“超级工位”大法。
这个方案可以说根本不是什么技术方案，而是一个办公设施，就是我们准备一个工位，摆上所有我们需要测试的主流设备，然后设备通过某种方式与一台电脑相连接，测试人员坐在工位上，在电脑中输入某个url，就能同步到所有设备中，然后开始逐个的人肉测试。
超级工位大法示意图（应该很多设备的，这里就是随便展示一下而已。。。）
相比现在的前端GUI测试，超级工位已经算是从0到1的飞跃了，虽然没解决什么技术问题，但为测试前的准备工作做好了铺垫。如果把前端测试比作吃屎，超级工位就是为这餐准备了一个好一点的餐桌。。。
2. 靠谱一些的“页面差异监控”
12年的时候还在百度，当时有同事去美国参加velocity，twitter分享了一下他们的开发流程，其中有一个环节就是页面对比监控，利用了一个叫pdiff的工具，每次提交代码，会自动对比页面之间的差异然后提醒测试人员注意回归。这也是一个典型的GUI测试零成本维护用例的案例。不过pdiff这个工具是基于像素对比的，误报率比较高，所以去年我做了一个这个项目： 基于DOM树的diff，这样就能很大程度上自主控制要监控的元素，可以设置监控样式、文本的变化，比起像素diff智能了一些。
其工作原理就是利用phantom或其他headless浏览器访问页面，然后截图，然后执行一段js，遍历整个dom树，获取元素计算样式和元素内文本内容，构造出一个JSON结构，然后每次diff这个json来判断页面差异，并标记在截图上展示。dom树的diff过程有点类似react的虚拟dom树diff。
（react的dom树diff算法示意图）
DOM树diff我们可以分辨出元素样式修改/内容修改/新增元素/删除元素四种不同的页面差异，我们可以配置选择器来忽略元素。四种页面差异的效果图：
新增元素（绿色区域标记部分，“i am new here”）
删除元素（灰色区域标记部分，“你好”）
内容修改（黄色区域标记部分，“百-度”，“新-浪”）
样式修改（红色区域标记的部分）
基于这样的页面差异对比监控，我们可以建立一个任务系统，把应用的所有页面url监控起来，这样每次版本迭代提交代码后，系统就能自动告诉我们，哪些页面的元素展现发生了改变，用于确定回归范围。
（目前我还只是把这个系统用于竞品或者自家产品的运营监控）
团队开发的基于像素diff的组件监控平台）
用监控的方式确定测试回归范围，是一种“少吃屎”的手段，符合工程化要求，能比较大范围的应用，虽然不能完美解决GUI中的交互问题，但能保证GUI的展现问题已经是不小的进步了。
=====[ 补充 ]=====
经评论中 @貘吃馍香 大大的提醒，这里强调一下：
页面差异监控的目的是方便的通知人肉回归范围，这并非测试方案，而是一种辅助测试的手段。
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线966,690 七月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
构建可靠的自动化发布体系
构建可靠的自动化发布体系
注意:GMTC全球移动技术大会-25日，
携程网是中国最大的在线旅行服务商，员工有2万余人；从2010年起，携程网的移动互联网战略转型，业务量被充分激活，正进行一系列10倍流量技术改造，部署领域：私有云平台、四个IDC、服务器年增长100%；项目交付领域：扩大到13个SBU、1400+研发人员、周300+项目上线；对研发部门可持续交付的效率，生产交付的可靠性（每秒价值5000+RMB）产生严峻挑战，为此进行1年多的技术改进和升级，积累了丰富的经验和案例；我这次带来分享的主题：构建可靠的自动化发布体系。
葛隽，携程研发经理，微博: @石破天军，现供职于携程网-系统研发部门5年，专注于DevOps系统及架构设计，主导了携程第二代、第三代Release工具集改进和升级，在大型网站架构，上线质量控制、自动化运维方面拥有丰富经验；曾就职于中国电信、神州数码、SYLMARK。
QCon是由InfoQ主办的全球顶级技术盛会，每年在伦敦、北京、东京、纽约、圣保罗、杭州、旧金山召开。自2007年3月份首次举办以来，已经有包括传统制造、金融、电信、互联网、航空航天等领域的近万名架构师、项目经理、团队领导者和高级开发人员参加过QCon大会。
相关厂商内容
相关赞助商
CNUTCon全球容器技术大会北京站，9月9日-10日，喜来登长城饭店，！
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?