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
210
CSS Future
w3cplus
2
610
Web Animation
w3cplus
5
480
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.8k
Sass带来的变革
w3cplus
2
580
Responsive小试牛刀
w3cplus
3
540
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
380
http协议与缓存简述
w3cplus
5
520
Other Decks in Technology
See All in Technology
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
230
研究開発と製品開発、両利きのロボティクス
youtalk
1
510
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
190
エラーとアクセシビリティ
schktjm
1
1.2k
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
120
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
670
2025年になってもまだMySQLが好き
yoku0825
8
4.5k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
110
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
540
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
フィンテック養成勉強会#56
finengine
0
140
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building Applications with DynamoDB
mza
96
6.6k
Speed Design
sergeychernyshev
32
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
GraphQLとの向き合い方2022年版
quramy
49
14k
A Tale of Four Properties
chriscoyier
160
23k
Building an army of robots
kneath
306
46k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Side Projects
sachag
455
43k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
BBQ
matthewcrist
89
9.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