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
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
140
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
300
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
130
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
100
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1.1k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
360
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
610
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
0
110
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
2.2k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
Bash Introduction
62gerente
613
210k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Documentation Writing (for coders)
carmenintech
72
4.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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