前端自动化工具探索

前端自动化工具探索 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

我们从偷窥开始

在线工具类直接参考漠哥的 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

前端自动化工具探索

前端自动化工具探索

w3cplus

More Decks by w3cplus

Other Decks in Technology

Featured

Transcript