前端自动化工具探索

Transcript

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

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

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

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

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

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

7. 我们从偷窥开始

8. None
9. None

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

11. 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与图像与处理

12. 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/ 文件处理与部署

13. gruntjs

14. 前端自动化在国内的发展 • 百度 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

15. 单元测试与自动化测试 • 什么叫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!"); } } ()); 被测试函数 测试用例 断言

16. 单元测试与自动化测试 • 为什么要做单元测试： • 给代码做测试是良好的习惯 • 永远不要相信用户的输入 • 前端组件复杂化，添加组件后，原来的组 件是否可用？？

    http://web.itivy.com/javascript-unit-test-tool/ Jasmine qunit

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

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

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

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

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

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

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

24. 注意js的书写 分号 合并前的标识符 匿名函数包裹（露该漏的） (function (){ var tookit = {

    each:function(){}, insert:function(){}, toggleDisplay:function(){}, } return tookit })() 慎用全局变量

25. 自动化工具实战之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

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

27. 自动化工具实战之phantomjs helloworld

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

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

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

31. 自动化工具实战之phantomjs canvas

32. 自动化工具实战之phantomjs

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

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