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.7k
Sass带来的变革
w3cplus
2
580
Responsive小试牛刀
w3cplus
3
540
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
370
http协议与缓存简述
w3cplus
5
520
Other Decks in Technology
See All in Technology
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
410
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
150
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
180
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
840
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
440
Mambaで物体検出 完全に理解した
shirarei24
2
210
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.7k
Claude Codeから我々が学ぶべきこと
s4yuba
6
1.7k
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
230
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
140
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
250
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building an army of robots
kneath
306
45k
Code Review Best Practice
trishagee
69
19k
Designing for humans not robots
tammielis
253
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Rails Girls Zürich Keynote
gr2m
95
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Gamification - CAS2011
davidbonilla
81
5.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
A Tale of Four Properties
chriscoyier
160
23k
Docker and Python
trallard
45
3.5k
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