前端自动化工具探索 99 前端工程师 新浪微博@宇宙一片小囧 

我们为什么需要前端自动化工具 

评价一个网站 雅虎14条， 有没有背熟呢？ （现在已经扩展到N条。。。） http://uicss.cn/yslow/#more-12319 回答木有奖 

Yslow评分-你的网站“怎么样” 测试下你们的网站吧。。 https://chrome.google.com/webstore/search- extensions/yslow?utm_source=chrome-ntp- icon 

当你输入网址后，发生了啥？ 回答木有奖 

当你输入了一个网页。。 http://article.yeeyan.org/view/54517/91367 

我们从偷窥开始 

No content

No content

在线工具类 直接参考漠哥的 http://www.w3cplus.com/source/front-end- developer-excellent-tool.html 

https://speakerdeck.com/w3cplus/webtu- xiang-cun-chu-kui-jian 图像存储窥见 Cssgaga http://www.ofcss.com/2012/03/22/cssgaga- quick-start.html Sh类脚本代表 http://youyodf.sinaapp.com/archives/361 在线类 http://www.smushit.com/ysmush.it/ Css与图像与处理 

Ant Grunt.js Rake(python) https://github.com/gruntjs/grunt http://gruntjs.com/ http://benalman.com/news/2012/08/why- grunt/ http://net.tutsplus.com/tutorials/javascript- ajax/meeting-grunt-the-build-tool-for- javascript/ http://mechanics.flite.com/blog/2012/06/19/ why-we-use-node-dot-js-and-grunt-to-build- javascript/ 文件处理与部署 

gruntjs 

前端自动化在国内的发展 • 百度 sh为主，fis平台 • http://www.flkit.org/ • 新浪微博 : • https://github.com/FlashSoft/weibo-packager • 淘宝ued ant-grunt.js(kissy Module compiler,seajs spm) • 人人网(css python) http://fed.renren.com/archives/1427 

单元测试与自动化测试 • 什么叫js单元测试 function addThreeToNumber(el){ return el + 3; } (function testAddThreeToNumber() { var a = 5, valueExpected = 8; if (addThreeToNumber(a) === valueExpected) { console.log("Passed!"); } else { console.log("Failed!"); } } ()); 被测试函数 测试用例 断言 

单元测试与自动化测试 • 为什么要做单元测试： • 给代码做测试是良好的习惯 • 永远不要相信用户的输入 • 前端组件复杂化，添加组件后，原来的组 件是否可用？？ http://web.itivy.com/javascript-unit-test-tool/ Jasmine qunit 

自动化工具实战ANT http://www.36ria.com/4411 Ant部署 http://99jty.com/?p=1042 我的一些笔记(环境搭建，ftp等等) 

前期准备 搭建java环境 安装ant 安装jar包(ftp支持) 配置好项目目录，准 备yui压缩器 

规定好入口跟task 注意变量 编码 路径 ，注意入口default 

合并css 注意路径 编码 文件类型 

压缩css 我们已经在第一步弄好了 combined.css了，直接写即可~ 

合并压缩js 在我们的部署文件里修改即可 

合并压缩js 与css几乎类似，但是更少，因为yui默认就是压缩js的 

注意js的书写 分号 合并前的标识符 匿名函数包裹（露该漏的） (function (){ var tookit = { each:function(){}, insert:function(){}, toggleDisplay:function(){}, } return tookit })() 慎用全局变量 

自动化工具实战之phantomjs phantomjs的wiki https://github.com/ariya/phantomjs/wiki api https://github.com/ariya/phantomjs/wiki/API-Reference#wiki-webpage-url 介绍。。来自网易 。。 PhantomJS便是这么一个为自动化而生的利器，它本质上是一个基于webkit内核 的无界面浏览器，并可使用JavaScript或CoffeeScript进行编程。由于没有界面， 它的使用就有点像curl, lynx之类的命令行式文本浏览器。但PhantomJS远不是文 本浏览器那么简单，由于它是基于webkit内核的，因此拥有的完善的Javascript解 析、页面渲染功能，你完全可用它来模拟一个现代浏览器在加载网页时所做的 各种事件。 安装程序 http://phantomjs.org/download.html 

自动化工具实战之phantomjs 非常牛逼的东西。。而且api也不多，学起来很快 

自动化工具实战之phantomjs helloworld 

自动化工具实战之phantomjs 渲染与截图功能 

自动化工具实战之phantomjs 截图，测试第三方类库 

自动化工具实战之phantomjs 页面打开时间 

自动化工具实战之phantomjs canvas 

自动化工具实战之phantomjs 

一切自动化都是纸老虎 你是否有自动化的需求？ 你是否想接触业内流行技术？ 你是否基础扎实？ 

谢谢！ W3CPLUS 99 javascript make the world beautiful @宇宙一片小囧 Q&A