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
470
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.7k
Sass带来的变革
w3cplus
2
570
Responsive小试牛刀
w3cplus
3
540
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
370
http协议与缓存简述
w3cplus
5
510
Other Decks in Technology
See All in Technology
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7k
2025 AWS Jr. Championが振り返るAWS Summit
kazukiadachi
0
110
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
170
What’s new in Android development tools
yanzm
0
310
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
150
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Balancing Empowerment & Direction
lara
1
430
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
A Tale of Four Properties
chriscoyier
160
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
The Invisible Side of Design
smashingmag
301
51k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Become a Pro
speakerdeck
PRO
29
5.4k
BBQ
matthewcrist
89
9.7k
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