Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
前端自动化工具探索
Search
w3cplus
January 18, 2013
Technology
4
1k
前端自动化工具探索
前端自动化工具探索
w3cplus
January 18, 2013
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
200
CSS Future
w3cplus
2
600
Web Animation
w3cplus
5
460
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.7k
Sass带来的变革
w3cplus
2
550
Responsive小试牛刀
w3cplus
3
530
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
360
http协议与缓存简述
w3cplus
5
510
Other Decks in Technology
See All in Technology
AIでめっちゃ便利になったけど、結局みんなで学ぶよねっていう話
kakehashi
PRO
1
330
「経験の点」の位置を意識したキャリア形成 / Career development with an awareness of the “point of experience” position
pauli
4
100
LiteXとオレオレCPUで作る自作SoC奮闘記
msyksphinz
0
730
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
130
2025-04-24 "Manga AI Understanding & Localization" Furukawa Arata (CyberAgent, Inc)
ornew
2
230
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
230
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
0
400
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
210
CodePipelineのアクション統合から学ぶAWS CDKの抽象化技術 / codepipeline-actions-cdk-abstraction
gotok365
5
280
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
1
430
SDカードフォレンジック
su3158
1
630
C++26アップデート 2025-03
faithandbrave
0
960
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Adopting Sorbet at Scale
ufuk
76
9.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
How STYLIGHT went responsive
nonsquared
99
5.5k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Transcript
前端自动化工具探索 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
我们从偷窥开始
None
None
在线工具类 直接参考漠哥的 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