跳过导航
Image showing a GitHub disc connecting to a Sketch document over a teal background.
学习设计

开放格式:使用 GitHub Actions 处理 Sketch 文档

利用 GitHub 的持续集成来自动化你的工作流程

本文是我们开放格式系列的一部分。如果您想在深入了解技术细节之前获得概述,请查看本系列的第一篇文章

在这个系列中,我们已经看到 Monday Studio 开发了一些工具来自动化他们的工作流程。在之前的文章中,我们告诉过您可以在许多持续集成服务上运行这些工具。今天我们将向您展示如何在 GitHub Actions 上远程和自动地执行此操作。

什么是 GitHub Actions?简而言之,这是一种在代码更改时自动在 GitHub 服务器上运行代码的方法。有关更多信息,请查看 GitHub 的官方文档

Subheading showing for designers.

使用 GitHub Actions 运行您的设计工作流程自动化意味着您无需在计算机上安装任何东西。当您将更新发送到共享存储库时,一切都会在云中自动运行。如果需要对工具进行调整,您可以使用 GitHub Codespaces — 或其他完全在浏览器上运行的在线代码编辑器,例如Visual Studio Code

Subheading showing for managers.

使用 GitHub Actions 意味着新团队成员的入职速度更快、总拥有成本更低、摩擦更少以及与开发工具的兼容性问题更少。一切都来自同一个集中的真理来源。作为奖励,它可以快速轻松地与现有工作流程和工具集成。

Subheading showing for developers.

使用 GitHub Actions 运行您的设计工作流程自动化意味着您不必担心开发环境的依赖关系和维护。此外,您可以在任何地方编辑和运行该代码,从而实现真正的多平台工作流程。

要求

您只需要一台带有浏览器的设备即可阅读本文。事实上,为了让您了解当我们说这是一种运行自动化的多平台方法时,我们所指的意思,您甚至可以使用智能手机完成以下所有步骤。

我们将构建什么

今天我们不打算构建任何东西。我们将重新访问该存储库,其中包含我们在该系列中构建的所有工具,并查看其.github/workflows文件夹。

对于所有这些项目,您将看到一个 YAML 文件,如下所示

name: Name of the action we're running

on:
  # Instructions about *when* to run this automation
  ...

jobs:
  # Instructions about *what* to run in this automation
  ...

我们将存储库设置为 GitHub 上的公共模板。您可以单击每个存储库主页上的“使用此模板”按钮来制作您自己的可编辑项目副本

Image showing the GitHub interface for the JSON to Sketch repository.

何时运行我们的 Actions

一般来说,我们希望我们的自动化在代码更改时运行。我们可以使用这段代码来指定,它告诉 GitHub Actions,当我们将代码推送到main分支或打开以其为目标的拉取请求时运行此操作

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

有时您需要将操作的范围限制为特定文件。我们的Sketch 到 JSON 自动化中有一个这样的例子。仅当我们修改定义资源库颜色的 JSON 文件时,操作才会运行

on:
  push:
    paths:
      - colors.json
      - .github/workflows/**.yml
    branches: [main]

自动运行 Actions 非常令人满意。但有时您需要手动运行 Action — 尤其是在调试它时。为此,您可以将workflow_dispatch:项添加到您的on:部分

on:
  push:
    ...
  pull_request:
    ...
  workflow_dispatch:

这将在 GitHub 的网站上启用一个按钮,您可以在需要运行该操作时按下它

Image showing the GitHub Actions interface, hovering over the Run workflow button.

该按钮甚至可以在 GitHub 的移动版本上使用,因此您可以在公园散步时运行您的自动化!

在 Action 中运行什么

一旦我们定义了何时要运行 Action,就该指定 Action 将做什么了。对于本系列中的任何项目,答案始终相同 — 我们希望 GitHub Actions 运行yarn start以运行项目中的代码。

在此之前,我们需要告诉运行我们的操作的服务器一些关于我们理想的工作环境的事情(我们要使用的node版本等等)。如果您查看任何项目的.github/workflows中的代码,您会看到如下内容

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      ...
      - name: Install node
        uses: actions/setup-node@v2
        with:
          node-version: 14.16
      - name: Install dependencies
        run: yarn install
      - name: Update Sketch Library
        run: yarn start
      ...

简而言之,这告诉 GitHub Actions 我们想使用 Linux 服务器(在本例中为 Ubuntu),安装 14.16 版本的 node 运行时,并在我们的项目上运行yarn install

闭环

现在我们知道如何让 GitHub Actions 运行我们的项目中的代码,我们可能想要收集我们工作的成果并将输出存储在某个地方。我们可以通过不同的方式来做到这一点,但有两种方式特别有用 — 将更改提交回我们的存储库并将资源作为 Artifacts 存储在 GitHub 上的 Actions 页面上。

提交您的更改

如果我们的项目的输出是我们想要与其余文件一起存储在存储库中的内容,那么我们最好的选择是提交运行 Action 的结果。这就像将此作为工作流程文件中的最后一步一样简单

      - name: Push changes in Sketch Library
        uses: actions-x/commit@v2
        with:
          email: developer@sketch.com
          name: Sketch Developer
          files: color-library.sketch

运行 Action 会将files:部分中列出的任何文件提交到您的存储库。您可以修改提交消息,甚至可以将更改推送到不同的存储库。有关更多信息,请查看actions-x/commit的文档。

存储 Action Artifacts

如果结果文件太大,或者您不想让它们污染项目的历史记录,您可以将它们作为 Artifacts 存储在 GitHub Actions 上。任何访问该页面的人都可以下载这些 Artifacts。为此,您的 Action 的最后一步应如下所示

      - uses: actions/upload-artifact@v2
        with:
          name: Material Design Icons - Sketch Library
          path: material-design-icons.sketch

现在,每当 Action 运行时,path:部分中指定的文件都将在 GitHub 网站上的 Action 的 Artifacts 部分中提供

Image showing the GitHub Actions interface, hovering over the Run workflow button.

有关更多信息,请查看actions/upload-artifact的文档。

结语

在本文中,我们介绍了如何使用 GitHub Actions 从云端运行您的 Sketch 自动化。我们希望您喜欢这个系列,并且您可以利用这些知识来提出新的方法,使您的设计过程更好、更轻松并减少摩擦。

与往常一样,如果您做了很棒的事情,请告诉我们。我们很乐意听到您的来信!

您是否在本系列中构建了一些值得分享的内容?是否有自动化的想法,但需要开发方面的帮助?对开发体验有反馈意见吗?请通过developer@sketch.com与我们联系!

您可能也喜欢

免费试用 Sketch

无论您是 Sketch 的新手,还是回来看看有什么新功能,我们都将让您在几分钟内完成设置并准备好完成您的最佳作品。

免费开始
免费开始