关于 CodeKit 2.0

Avatar of Chris Coyier
Chris Coyier 发表

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!

以下是 CodeKit 创建者 Bryan Jones 的客座文章。我已经使用 CodeKit 两年了,并且我 谈论它很多。在我看来,它改变了前端开发的游戏规则,使得使用高级工具变得容易,这些工具虽然强大,但对许多人来说却难以触及。现在 CodeKit 2.0 已经发布,它紧跟前端开发的趋势,为我们带来了更多强大的工具,否则很难实现。Bryan 将介绍它,而我将在必要时插话,分享我过去一个月使用 2.0 的感受。

什么是 CodeKit?

CodeKit 是一款应用程序,可帮助您更快地构建网站。它编译所有前沿语言,如 Sass、Less、Stylus 和 CoffeeScript。它实时刷新您的浏览器。它合并、压缩和语法检查 JavaScript。它甚至优化图像。所有这些都能够加速您的网站和工作流程。

还有其他方法可以实现这些功能,但 CodeKit 的使命是消除这个过程中的痛苦。您只需将项目文件夹拖放到应用程序中,然后开始工作。无需编辑 JSON 文件,无需安装或下载任何内容。无需记忆命令。它可以正常工作。

2.0 中有什么新功能?

首先,我聘请了一位设计师 (Guy Meyer),因此 UI 看起来不再像被反复用 DOS 5.1 手册殴打过。新版本还通过一系列优化,速度提高了 1,400%,并且在团队环境中运行得更好。

但您真正关心的是它如何让更快。因此,与其列出每个新功能,不如直接列出四个最能立即改变您的工作方式的功能

1. 刷新所有浏览器

您的网站必须在许多设备上都能很好地显示。您在 iPhone、iPad、Galaxy S3、Chrome、Firefox 甚至 PC 上的 IE 11 上打开它。这需要点击很多刷新按钮。CodeKit 可以为您完成这项工作。

CodeKit 现在可以实时刷新所有这些设备,甚至更多。更改代码后,只需不到一秒钟,所有设备都会更新以显示这些更改。无需插件,无需复杂的配置。即使在 WordPress 和 Drupal 等高级网站上也能正常工作。只需点击 CodeKit 中的预览按钮,然后将 URL 复制到其他设备。一旦您体验了它的实际效果,您将无法再离开它。

Chris 的注:当您更改模板或 JavaScript 文件等内容时,页面不仅会刷新,而且页面还会对 CSS 更改执行 样式注入(无论它们来自预处理器还是其他来源)。这意味着设计交互状态变得更加容易。

CodeKit 1 也能执行样式注入,但现在 CodeKit 自带服务器(如果您愿意,它可以转发到 MAMP 或其他任何服务器),这意味着实际上任何浏览器都能获得刷新和样式注入功能。

2. Bower

Bower 允许您快速安装超过 7,000 个组件:jQuery、Modernizr、Bootstrap,甚至 WordPress。Bower 现在已内置到 CodeKit 中,因此所有这些资源只需点击两下即可获取。打开资源区域,选择所需的组件,然后点击图标。CodeKit 会从网络获取最新版本,以及任何必需的依赖项,并将它们直接放到您的项目中。

当需要更新组件时,CodeKit 也会为您节省大量工作。只需打开资源区域,然后选择已安装选项卡。它会显示您项目中每个组件的版本以及在线可用的最新版本。只需点击一下即可更新所有组件,或者选择更新。

Chris 的注:虽然我还没有机会大量使用 Bower,但保持前端依赖项更新是我最想做的事情。

3. Autoprefixer

供应商前缀:只有 IE6 工程师才会喜欢的 CSS 规则。 Autoprefixer 使它们变得轻松,它现在已内置到 CodeKit 中。您只需编写标准 CSS,Autoprefixer 会根据每个浏览器的最新信息添加所有必需的供应商前缀。它可以与 Less、Sass 和 Stylus 无缝集成。它也是完全可配置的:只需指定您需要支持的浏览器,它会完成其余工作。

Chris 的注:我认为 Autoprefixer 几乎与 CodeKit 本身一样重要,它们是完美的搭配。虽然我仍然非常喜欢预处理器,但我不再喜欢使用它们来添加前缀。Autoprefixer 是处理此问题的更好方法。您可以 从它的创建者这里了解更多信息

4. Libsass

您正在阅读 CSS-Tricks,所以您可能使用 Sass。它需要几秒钟才能编译,对吧?现在不再是了。在 CodeKit 中开启 Libsass,您的 Sass 就会立即编译。Libsass 是一个新的 Sass 编译器,用 C 而不是 Ruby 编写,因此它像 Justin-Beiber-tanking-his-billion-dollar-singing-career 一样快。

现在,Libsass确实是一个测试版,并且一些高级 Sass 功能(如命名空间和新的 3.3 语法添加)尚未得到支持。但 Libsass 正在快速发展,目标是在今年夏天达到完全一致。除非您正在进行非常复杂的事情,否则您可能现在就可以使用它,并显著加快您的工作速度。(我们在 CodeKit 的网站上使用了它,它有一些非常前沿的 CSS)。

Chris 的注:虽然 Bryan 正确地开玩笑说我 更喜欢 Sass,但我并不特别关心您使用什么,因为所有 CSS 预处理器都有其优点。Sass 的少数缺点之一是,与基于 JavaScript 的预处理器相比,它的编译速度很慢。Libsass 使 Sass 成为最快的预处理器,因此这很棒(如果您能够使用它)。

更多酷炫的功能

好吧,我撒谎了。新功能太多了,不能只列出四个。以下还有四个您会喜欢的功能

源映射

CodeKit 可以为 Sass、Less、CoffeeScript、JavaScript 和 TypeScript 文件创建源映射。(顺便说一句,CodeKit 现在可以编译 TypeScript。)源映射让您可以在浏览器的 Web 检查器中看到原始源代码,而不是已编译的输出,这使得调试变得容易。

Zurb Foundation

现在有一个“新建 Zurb Foundation 项目”命令,它会从网络获取 Zurb Foundation 的最新版本并自动设置它。这是一个非常常见的特征请求。

钩子

需要在项目文件发生变化时运行自定义的 AppleScript 或 Bash 脚本吗?也许让 Transmit 或 Coda 同步到远程服务器?压缩一些文件?没问题。只需设置一个 Hook,CodeKit 就会运行您需要的任何操作。

来自 Chris 的注意:看看它运行 Grunt 或 Gulp 会很有趣。Grunt 的魅力在于它可以做无数的事情——这些事情可能非常具体,可能不适合作为 CodeKit 的核心功能(例如,我 在这里 描述的 SVG 内容)。我不确定混合使用多个构建工具是否是个好主意,但这值得思考。

对 CoffeeScript 的热爱

如果您使用 CoffeeScript,CodeKit 有两个您会喜欢的全新功能。首先,您现在可以直接将 JavaScript 文件(如 jQuery)添加到 CoffeeScript 文件的开头。您可以使用应用程序中的拖放功能或文件内的语句来完成此操作。无论哪种方式,CodeKit 都会将它们全部组合成一个压缩的 JavaScript 文件。

其次,CoffeeLint 现在已内置,因此您可以在 CoffeeScript 文件编译之前对其进行语法检查。这对于强制执行特定样式也很有用,例如每行缩进的空格数。

接下来是什么?

简短的答案是:“Chris Coyier 想要什么”。长答案是,我对 CodeKit 的架构进行了彻底的改造,因此添加新功能不再需要大动干戈。我计划快速行动并持续迭代。Jekyll 支持在我的列表中排在首位。脚手架和模板也排在前面。HTML 压缩器。Kit 语言中的 if-else 语句和循环。正如 Tim Cook 所说,“我们有一些令人兴奋的产品即将上市。”

联系我们!

我喜欢听到业内人士的意见,即使他们没有使用 CodeKit。(Grunt 最棒!)来看看我们的 新网站。我不能居功,Guy Meyer 设计并构建了它,但我们真的很想听听您的想法,专业人士之间互相交流。您可以在 Twitter 上找到我:@bdkjones