前端利器 CodeKit
当 CSS 越来越臃肿,人们创造了 Less, Sass 和 Stylus, 当 JavaScript 越来越臃肿,人们创造了 CoffeeScript, 最后人们嫌 HTML 太啰嗦了,创造了 Haml, 总之怎么快怎么来。但是这些都不是标准的解决方案,大部分都需要一个编译的过程,这让新手和部分设计师望而却步,CodeKit 的出现很好的解决了这些问题。以下大致介绍一下 CodeKit 的功能:(官方页面上的视频介绍很直观,其实看那些视频更容易理解)
Project 和 Frameworks
CodeKit 的所有功能是基于 Project, 因此你必须首先创建一个 Project, 按 + 选择你的项目目录,或者直接拖拽进来。
目前网上存在很多 Frameworks, 有 CSS 的,有 JavaScript 的,你可以把这些添加为 CodeKit 里的 Frameworks, 这样你所有的 Project 就可以共享这些 Frameworks.
自动编译
CodeKit 支持:
- 编译成 CSS: Less, Sass 和 Stylus.
- 编译成 JavaScript:CoffeeScript.
- 编译成 HTML:Haml.
语法检查和优化
编译后,支持使用 Bless 检查 CSS 文件的选择器数量(注1),用 JSHint 或者 JSLint 检查 JS 文件的语法和错误,合并文件,用 UglifyJS 进行压缩,一步完成。JSLint, JSLint, UglifyJS 的参数部分也有专门的配置界面。另外你可以自定义编译后的路径和文件名。
在窗口内选择图片文件(目前支持 jpeg 和 png 文件),可以进行压缩优化的操作。
另外 CodeKit 目前支持自动刷新 Safari 和 Chrome 的指定 Tab 页面。但是如果你是一个 Command + S 控(注2),并且你安装了 Growl, 你会收到好多编译成功的消息(严重时刷屏)。CodeKit 是个非常强大的工具,可以帮你节省好多时间。
【注1】: 当一个 CSS 文件里有超过 4,095 个 CSS 选择器,IE9以及之前的版本将无法处理超出的部分。Bless 正是帮你做这方面的检查和处理,具体可以看这里。
【注2】:编辑文件的时候,经常无意识的按 Command + S 保存当前文件,并且是连续按,以确保文件保存成功(近似强迫症)。
Mac 上的前端工具分享
随着 Mac 的普及,前端 + Mac 的配置已经越来越多了。分享一下我的在 Mac 上的前端配置(姑且说是配置吧,其实就是一些工具和 app)
硬件方面
Macbook pro 13寸 + Dell 23寸显示器 + 苹果有线键盘 + Dell 鼠标 + 笔记本支架。其他可选方案:iMac, Mac Pro + LED Cinema Display 等等
代码编辑工具:TextMate
没什么悬念,关于这朵菊花就不再深入介绍了。其他可选方案:Espresso, Coda
测试环境:VirtualBox(IE6,IE7,IE9)
没办法,在悲催的环境中,IE 还是主要客户,我的方案是用 VirtualBox 建立了三个虚拟机环境,分别是 XP+IE6, VISTA+IE7, WIN7+IE9. 其他可选虚拟机软件:VMware Fusion, Parallels Desktop
调试工具
一般就是浏览器自带调试工具或者是 firebug for firefox
辅助工具
我常用的 Mac 软件
使用 Mac 也快5年了,分享一些我在 Mac 下使用的软件,仅供参考。
Alfred
快捷启动软件,配合各种脚本可以做好多事情,不过我一般只用来启动其他软件。
AppCleaner
之前是一个软件控,喜欢尝试各种软件,那么一个清除垃圾的软件是必备的。
Caffeine
可以阻止屏幕进入省电状态,看电影必备。
ClipMenu
剪贴板管理软件,支持多媒体文件,并且自带 snippet 功能。
Cloud
算是分享工具把,上传文字、图片、代码什么的,Web 端很优雅。
Day-O
小工具,作用仅仅是替换 Mac 菜单栏上默认的日历显示。
GitHub
GitHub 网站的 Mac 客户端。
iA Writer
Markdown 格式编辑器,小清新的 UI,很舒服。
Reeder
优雅的 Google Reader 客户端。
TextMate
菊花编辑器。
Time Out
劳逸结合的工具,会提示你休息。
TotalFinder
给 Finder 添加 Tab 功能。
Twitter 客户端。