Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
進擊的 Mac OS 之前端开发
hzlzh
September 06, 2013
Technology
3
270
進擊的 Mac OS 之前端开发
使用Mac OS进行前端开发的一点分享
原版Keynote下载地址:
http://vdisk.weibo.com/s/z9dGioP9NHYr9
hzlzh
September 06, 2013
Tweet
Share
More Decks by hzlzh
See All by hzlzh
[WebRebuild 2013] 移动终端重构Workflow
hzlzh
20
7.2k
1.618 发现设计之美
hzlzh
3
950
Other Decks in Technology
See All in Technology
WebLogic Server for OCI 概要
oracle4engineer
PRO
3
880
証明書って何だっけ? 〜AWSの中間CA移行に備える〜
minorun365
3
2.1k
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
160
JAWS-UG 横浜 #54 資料
takakuni
0
210
OCI DevOps 概要 / OCI DevOps overview
oracle4engineer
PRO
0
490
メドレー エンジニア採用資料/ Medley Engineer Guide
medley
3
5.1k
組織に対してSREを適用するとどうなるか
kuniim
7
2.7k
02_プロトタイピングの進め方
kouzoukaikaku
0
470
マイクロサービス宣言から8年 振り返りとこれから / Eight Years After the Microservices Declaration A Look Back and A Look Ahead
eisuke
2
160
Bill One 開発エンジニア 紹介資料
sansantech
PRO
0
110
AWS Cloud Forensics & Incident Response
e11i0t_4lders0n
0
330
NGINXENG JP#2 - 2-NGINXの動作の詳細
hiropo20
1
140
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
35
11k
Designing the Hi-DPI Web
ddemaree
273
32k
Making Projects Easy
brettharned
102
4.8k
Clear Off the Table
cherdarchuk
79
290k
Documentation Writing (for coders)
carmenintech
51
2.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
The Invisible Side of Design
smashingmag
292
48k
A designer walks into a library…
pauljervisheath
199
16k
GraphQLの誤解/rethinking-graphql
sonatard
39
7.8k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k
Atom: Resistance is Futile
akmur
256
24k
Teambox: Starting and Learning
jrom
124
7.9k
Transcript
None
進擊的 Mac OS 前端开发
進擊的 Mac OS ⻩黄⾃自⼒力 @hzlzh 前端开发
進擊的 Mac OS ⻩黄⾃自⼒力 @hzlzh 前端开发
⾃自我介绍
⾃自我介绍 ‣ ECC - 移动终端设计中⼼心 - 前端开发组
⾃自我介绍 ‣ 从Mac OS 10.6 开始做为主开发环境 ‣ ECC - 移动终端设计中⼼心
- 前端开发组
⾃自我介绍 ‣ 从Mac OS 10.6 开始做为主开发环境 ‣ ECC - 移动终端设计中⼼心
- 前端开发组 •10.6 Snow Leopard •10.7 Lion •10.8 Mountain Lion •10.9 Mavericks
⾃自我介绍 ‣ 从Mac OS 10.6 开始做为主开发环境 ‣ ECC - 移动终端设计中⼼心
- 前端开发组 ‣ Mac OS & iOS 发烧友 •10.6 Snow Leopard •10.7 Lion •10.8 Mountain Lion •10.9 Mavericks
为什么选择 MAC OS 开发环境 ?
‣ UI漂亮、操作简单、 ⾼高端⼤大⽓气上档次??? 为什么选择 MAC OS 开发环境 ?
‣ UI 为什么选择 MAC OS 开发环境 ?
‣ UI 为什么选择 MAC OS 开发环境 ? ‣ 基于Unix 集成
c/c++/java/perl/python/php/ruby/lisp
‣ UI 为什么选择 MAC OS 开发环境 ? ‣ 基于Unix 集成
c/c++/java/perl/python/php/ruby/lisp • brew install node
‣ UI 为什么选择 MAC OS 开发环境 ? ‣ 基于Unix 集成
c/c++/java/perl/python/php/ruby/lisp • brew install node • brew install git
‣ UI 为什么选择 MAC OS 开发环境 ? ‣ 基于Unix 集成
c/c++/java/perl/python/php/ruby/lisp • brew install node • brew install git • brew install unrar
‣ UI 为什么选择 MAC OS 开发环境 ? ‣ 基于Unix 集成
c/c++/java/perl/python/php/ruby/lisp • brew install node • brew install git • brew install unrar • brew cask install qq
‣ UI 为什么选择 MAC OS 开发环境 ? ‣ 较好的开发者⽣生态环境 ‣
基于Unix 集成 c/c++/java/perl/python/php/ruby/lisp • brew install node • brew install git • brew install unrar • brew cask install qq
‣ UI 为什么选择 MAC OS 开发环境 ? ‣ 较好的开发者⽣生态环境 ‣
基于Unix 集成 c/c++/java/perl/python/php/ruby/lisp ‣ 丰富的开发⼯工具、效率⼯工具、成熟的⼯工作流 • brew install node • brew install git • brew install unrar • brew cask install qq
‣ UI 为什么选择 MAC OS 开发环境 ? ‣ 较好的开发者⽣生态环境 ‣
基于Unix 集成 c/c++/java/perl/python/php/ruby/lisp ‣ 丰富的开发⼯工具、效率⼯工具、成熟的⼯工作流 ‣ Time Machine备份,⼏几乎没有病毒, 游戏稀少 • brew install node • brew install git • brew install unrar • brew cask install qq
内⺴⽹网 MAC 开发环境问题
内⺴⽹网 MAC 开发环境问题 == 可访问 == • 内网环境 • yahoo.com
/ gmail.com • twitter.com / facebook.com ‣ 内⺴⽹网WiFi
内⺴⽹网 MAC 开发环境问题 == 可访问 == • 内网环境 • yahoo.com
/ gmail.com • twitter.com / facebook.com ‣ 内⺴⽹网WiFi == 不能访问 == • 未配代理:Dropbox | Sublime Text Package Control | intellij IDEA Plugin • 不支持代理:Mail.app/Sparrow.app | 迅雷.app | Alfred Feedback • 命令行:node | python | wget | npm | ruby | curl • 非白名单的被认证网站:feedly.com | vimeo.com | gfwlist.autoproxy.org 1SPYJGJFSBQQ
None
MAC 前端开发效率⼯工具分享
* 快速启动 * 剪切板历史记录 * 快速翻译 * 常⽤用短语⽚片段 * Hosts切换
* Hosts管理 * 取⾊色⼯工具 * PhotoShop 联动 Alfred Gas Mask Frank DeLoupe * 强⼒力8合⼀一⼯工具 * iOS标注,预览 * ⾃自动刷新浏览器 * ⾃自动编译 * 配⾊色⼯工具 * 配⾊色预览 xScope Live Reload ColorSchem er Studio * 快速开发环境 * 代码⽚片段收藏 * 查阅⽂文档 * 短语快速扩展 * 多屏多窗⼝口管理 * 快捷键定位窗⼝口 Code Runner Dash Moom MAC 前端开发效率⼯工具分享
新项⺫⽬目流程
‣ grunt init - 初始化项⺫⽬目 新项⺫⽬目流程
‣ grunt init - 初始化项⺫⽬目 ‣ grunt less - less
-> yuicompress -> css 新项⺫⽬目流程
‣ grunt 2x2x - @2x 转 普清 ‣ grunt init
- 初始化项⺫⽬目 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程
‣ grunt 2x2x - @2x 转 普清 ‣ grunt init
- 初始化项⺫⽬目 ‣ grunt hellosprite - 合并雪碧图 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程
‣ grunt 2x2x - @2x 转 普清 ‣ grunt init
- 初始化项⺫⽬目 ‣ grunt copy - 创建发布⺫⽬目录 ‣ grunt hellosprite - 合并雪碧图 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程
‣ grunt 2x2x - @2x 转 普清 ‣ grunt init
- 初始化项⺫⽬目 ‣ grunt copy - 创建发布⺫⽬目录 ‣ grunt hellosprite - 合并雪碧图 ‣ grunt pngmin - 压缩png图⽚片 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程
‣ grunt 2x2x - @2x 转 普清 ‣ grunt init
- 初始化项⺫⽬目 ‣ grunt copy - 创建发布⺫⽬目录 ‣ grunt hellosprite - 合并雪碧图 ‣ grunt pngmin - 压缩png图⽚片 ‣ grunt watch - 监控⽂文件变动触发事件 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程
‣ grunt 2x2x - @2x 转 普清 ‣ grunt init
- 初始化项⺫⽬目 ‣ grunt copy - 创建发布⺫⽬目录 ‣ grunt hellosprite - 合并雪碧图 ‣ grunt pngmin - 压缩png图⽚片 ‣ grunt watch - 监控⽂文件变动触发事件 ‣ grunt ftp-deploy - 发布到内⺴⽹网服务器和外⺴⽹网体验 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程
None
MAC 效率⼯工具推荐
* 超赞的 Diff ⼯工具 * 精美的界⾯面 * 时间管理⼯工具 * 健康提醒⼯工具
* 番茄⼯工作法 * 图⽚片素材收集 * 素材管理 Kaleidoscope Break Time Sparkbox * 效率⼯工具 *类iOS Tip机制 * 临时栈 * ⽂文件操作 * Mac App 更新⼯工具 * 软件管家 Popclip Dropshelf MacUpdate * 多屏幕⿏鼠标切换 * 节省⿏鼠标轨迹 * Menu栏管理 * ⾃自定义图标排列 * 强迫症必备 * 快捷键提⽰示 * 键盘流的⺩王道 Catch Mouse Bartender CheatSheet MAC 效率⼯工具推荐
扩展 ‣ OS X Daily - http://osxdaily.com/ ‣ V2EX -
Mac OS 节点 - http://v2ex.com/go/macosx/
None
THANK YOU! @hzlzh