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
進擊的 Mac OS 之前端开发
Search
hzlzh
September 06, 2013
Technology
3
390
進擊的 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.7k
1.618 发现设计之美
hzlzh
3
1.1k
Other Decks in Technology
See All in Technology
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
130
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
340
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
430
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to Ace a Technical Interview
jacobian
278
23k
We Have a Design System, Now What?
morganepeng
53
7.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Raft: Consensus for Rubyists
vanstee
140
7k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
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