Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

進擊的 Mac OS 前端开发

Slide 3

Slide 3 text

進擊的 Mac OS ⻩黄⾃自⼒力 @hzlzh 前端开发

Slide 4

Slide 4 text

進擊的 Mac OS ⻩黄⾃自⼒力 @hzlzh 前端开发

Slide 5

Slide 5 text

⾃自我介绍

Slide 6

Slide 6 text

⾃自我介绍 ‣ ECC - 移动终端设计中⼼心 - 前端开发组

Slide 7

Slide 7 text

⾃自我介绍 ‣ 从Mac OS 10.6 开始做为主开发环境 ‣ ECC - 移动终端设计中⼼心 - 前端开发组

Slide 8

Slide 8 text

⾃自我介绍 ‣ 从Mac OS 10.6 开始做为主开发环境 ‣ ECC - 移动终端设计中⼼心 - 前端开发组 •10.6 Snow Leopard •10.7 Lion •10.8 Mountain Lion •10.9 Mavericks

Slide 9

Slide 9 text

⾃自我介绍 ‣ 从Mac OS 10.6 开始做为主开发环境 ‣ ECC - 移动终端设计中⼼心 - 前端开发组 ‣ Mac OS & iOS 发烧友 •10.6 Snow Leopard •10.7 Lion •10.8 Mountain Lion •10.9 Mavericks

Slide 10

Slide 10 text

为什么选择 MAC OS 开发环境 ？

Slide 11

Slide 11 text

‣ UI漂亮、操作简单、 ⾼高端⼤大⽓气上档次？？？ 为什么选择 MAC OS 开发环境 ？

Slide 12

Slide 12 text

‣ UI 为什么选择 MAC OS 开发环境 ？

Slide 13

Slide 13 text

‣ UI 为什么选择 MAC OS 开发环境 ？ ‣ 基于Unix 集成 c/c++/java/perl/python/php/ruby/lisp

Slide 14

Slide 14 text

‣ UI 为什么选择 MAC OS 开发环境 ？ ‣ 基于Unix 集成 c/c++/java/perl/python/php/ruby/lisp • brew install node

Slide 15

Slide 15 text

‣ UI 为什么选择 MAC OS 开发环境 ？ ‣ 基于Unix 集成 c/c++/java/perl/python/php/ruby/lisp • brew install node • brew install git

Slide 16

Slide 16 text

‣ UI 为什么选择 MAC OS 开发环境 ？ ‣ 基于Unix 集成 c/c++/java/perl/python/php/ruby/lisp • brew install node • brew install git • brew install unrar

Slide 17

Slide 17 text

‣ 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

Slide 18

Slide 18 text

‣ 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

Slide 19

Slide 19 text

‣ 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

Slide 20

Slide 20 text

‣ 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

Slide 21

Slide 21 text

内⺴⽹网 MAC 开发环境问题

Slide 22

Slide 22 text

内⺴⽹网 MAC 开发环境问题 == 可访问 == • 内网环境 • yahoo.com / gmail.com • twitter.com / facebook.com ‣ 内⺴⽹网WiFi

Slide 23

Slide 23 text

内⺴⽹网 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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

MAC 前端开发效率⼯工具分享

Slide 26

Slide 26 text

* 快速启动 * 剪切板历史记录 * 快速翻译 * 常⽤用短语⽚片段 * Hosts切换 * Hosts管理 * 取⾊色⼯工具 * PhotoShop 联动 Alfred Gas Mask Frank DeLoupe * 强⼒力8合⼀一⼯工具 * iOS标注，预览 * ⾃自动刷新浏览器 * ⾃自动编译 * 配⾊色⼯工具 * 配⾊色预览 xScope Live Reload ColorSchem er Studio * 快速开发环境 * 代码⽚片段收藏 * 查阅⽂文档 * 短语快速扩展 * 多屏多窗⼝口管理 * 快捷键定位窗⼝口 Code Runner Dash Moom MAC 前端开发效率⼯工具分享

Slide 27

Slide 27 text

新项⺫⽬目流程

Slide 28

Slide 28 text

‣ grunt init - 初始化项⺫⽬目 新项⺫⽬目流程

Slide 29

Slide 29 text

‣ grunt init - 初始化项⺫⽬目 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程

Slide 30

Slide 30 text

‣ grunt 2x2x - @2x 转 普清 ‣ grunt init - 初始化项⺫⽬目 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程

Slide 31

Slide 31 text

‣ grunt 2x2x - @2x 转 普清 ‣ grunt init - 初始化项⺫⽬目 ‣ grunt hellosprite - 合并雪碧图 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程

Slide 32

Slide 32 text

‣ grunt 2x2x - @2x 转 普清 ‣ grunt init - 初始化项⺫⽬目 ‣ grunt copy - 创建发布⺫⽬目录 ‣ grunt hellosprite - 合并雪碧图 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程

Slide 33

Slide 33 text

‣ grunt 2x2x - @2x 转 普清 ‣ grunt init - 初始化项⺫⽬目 ‣ grunt copy - 创建发布⺫⽬目录 ‣ grunt hellosprite - 合并雪碧图 ‣ grunt pngmin - 压缩png图⽚片 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程

Slide 34

Slide 34 text

‣ grunt 2x2x - @2x 转 普清 ‣ grunt init - 初始化项⺫⽬目 ‣ grunt copy - 创建发布⺫⽬目录 ‣ grunt hellosprite - 合并雪碧图 ‣ grunt pngmin - 压缩png图⽚片 ‣ grunt watch - 监控⽂文件变动触发事件 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程

Slide 35

Slide 35 text

‣ grunt 2x2x - @2x 转 普清 ‣ grunt init - 初始化项⺫⽬目 ‣ grunt copy - 创建发布⺫⽬目录 ‣ grunt hellosprite - 合并雪碧图 ‣ grunt pngmin - 压缩png图⽚片 ‣ grunt watch - 监控⽂文件变动触发事件 ‣ grunt ftp-deploy - 发布到内⺴⽹网服务器和外⺴⽹网体验 ‣ grunt less - less -> yuicompress -> css 新项⺫⽬目流程

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

MAC 效率⼯工具推荐

Slide 38

Slide 38 text

* 超赞的 Diff ⼯工具 * 精美的界⾯面 * 时间管理⼯工具 * 健康提醒⼯工具 * 番茄⼯工作法 * 图⽚片素材收集 * 素材管理 Kaleidoscope Break Time Sparkbox * 效率⼯工具 *类iOS Tip机制 * 临时栈 * ⽂文件操作 * Mac App 更新⼯工具 * 软件管家 Popclip Dropshelf MacUpdate * 多屏幕⿏鼠标切换 * 节省⿏鼠标轨迹 * Menu栏管理 * ⾃自定义图标排列 * 强迫症必备 * 快捷键提⽰示 * 键盘流的⺩王道 Catch Mouse Bartender CheatSheet MAC 效率⼯工具推荐

Slide 39

Slide 39 text

扩展 ‣ OS X Daily - http://osxdaily.com/ ‣ V2EX - Mac OS 节点 - http://v2ex.com/go/macosx/

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

THANK YOU! @hzlzh