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

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

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

使用 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 上的公共模板。您可以单击每个存储库主页上的“使用此模板”按钮来制作您自己的可编辑项目副本

何时运行我们的 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 的网站上启用一个按钮,您可以在需要运行该操作时按下它

该按钮甚至可以在 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 部分中提供

有关更多信息,请查看actions/upload-artifact的文档。
结语
在本文中,我们介绍了如何使用 GitHub Actions 从云端运行您的 Sketch 自动化。我们希望您喜欢这个系列,并且您可以利用这些知识来提出新的方法,使您的设计过程更好、更轻松并减少摩擦。
与往常一样,如果您做了很棒的事情,请告诉我们。我们很乐意听到您的来信!