生成 MacOS icns

On this page

概述

本篇 Pipeline 导出源文件： flomi extention

在 MacOS 中，一个 APP 的图标格式为 icns，其中包含了多张不同分辨率的图标，系统会根据当前设备分辨率自动选择。生成步骤：

准备一张 1024 x 1024 的图标图片。
通过 sips 命令生成多张分辨率不同的图片。
通过 iconutil 命令生成 icns。

接下来我会用比较复杂的方式展示 Flomi 尽可能多的功能。

实践

创建 Job

创建 SIPS Job

sips 生成图片命令：

# 把 input.png 转成 250x250 分辨率，并输出到 output.png
sips -z 250 250 input.png --out output.png

其中分辨率/输入/输出做为变量传入。

先创建一个空 Job，填写基本信息：
创建一个动态 Environments 视图，用来输入分辨率/输入文件/输出文件：

double: 是否为双倍图 @2x，这里用一个checkbox 来输入
width: 图片宽度，这里用一个input来输入，并校验为纯数字
inputFile: 输入的 1024x1024 的 icon 图片，这里用 fileInput 来输入

以下为 Enviroments JSON 代码

{
  "viewBox": {
    "labelWidth": "20%",
    "widgets": [
      {
        "input": {
          "name": "width",
          "placeholder": "png size (px)",
          "validation": "^\\d+$"
        },
        "label": "Size"
      },
      {
        "checkbox": {
          "label": "2x",
          "name": "double"
        }
      },
      {
        "fileInput": {
          "exts": [
            "png"
          ],
          "kind": "file",
          "name": "inputFile",
          "op": "select",
          "placeholder": "1024x1024 PNG"
        },
        "label": "Src File"
      }
    ]
  },
  "value": {
    "double": "true",
    "inputFile": "/Users/xinyanwu/Downloads/icon.png",
    "width": "512"
  }
}

点击 Preview 预览

填写命令，基中分辨率/输入文件/输出文件来源于环境变量：这里先判断了一下是否是双倍图，是的话 size 翻倍，并在文件名上拼上 @2x，文件因为是临时文件，我这里选择保存到TMP目录中，最后输出图片路径所在目录。

 [ $double ] && w=$((width*2));s="@2x" || 2=width && rm -rf ${TMPDIR}flomi.iconset && mkdir -p ${TMPDIR}flomi.iconset && sips -z ${w} ${w} ${inputFile} --out ${TMPDIR}flomi.iconset/icon_${width}x${width}${s}.png >/dev/null  && echo '{"success": true, "output": "'${TMPDIR}flomi.iconset'"}'

记得点击 Save 保存!!!

创建 iconutil Job

iconutil -c icns {input path} -o {output path} 这里 input path 可以用参数传入，output path 可以 Environments 输入

直接从 Sips PNG 上 Duplicate 出来，简单编辑一下
编辑 Environmnents 如下：

{
  "viewBox": {
    "labelWidth": "20%",
    "widgets": [
      {
        "fileInput": {
          "exts": [
            "icns" // 扩展名
          ],
          "kind": "file", 
          "name": "outputFile",
          "op": "save", // 保存文件
          "placeholder": "*.icns"
        },
        "label": "Save to"
      }
    ]
  },
  "value": {
    "outputFile": ""
  }
}

编辑命令

# ${outputFile} 为环境变量， {{.}} 为前一个 JOB 输入参数
iconutil -c icns {{.}} -o ${outputFile} && echo '{"success": true}'

创建 Pipeline

创建一个新的 Pipeline

首先，拖入一个 Custom Job ，用于清理并创建导出的文件目录，Command:

rm -rf $TMPDIRflomi.iconset && mkdir -p $TMPDIRflomi.iconset && echo '{"success": true}'

创建多个 Sips PNG 转不同规格的：16x16, 16x16@2x, 32x32, 32x32@2x, 64x64, 64x64@2x, 128x128, 128x128@2x, 256x256, 256x256@2x, 512x512, 512x512@2x 分别创建对应的 Stage。

如图，把 Sips PNG 拖拽入工作区，选中后把 Environments 中的值进行修改。然后可以直接选中 CMD + C 复制再 CMD + V 粘贴略作修改，把所有分辨率都设置完成后得到上图内容。

这里采用的是从 Make TmpDir 开始分别 link 所有 Sips PNG 的 Stage，所以这里是并发执行，也可以每个 Sips PNG 相 Link 串成一个串这会串行执行。

当并发执行时，涉及到完成有先后，所以需要等待所有的前置 Stage 完成后再执行后续操作，可能勾选 Wait for all preceding stages 来达到这个效果，但注意的是，如果勾选了以后，前置所有的结果中的 outputs 会被提取出来，并合为一个数组传到 Wait Stage 的输入，这里加入一个 Custom Job 来处理一下输出。

其中 {{index . 0}}，对 . 这个前置数组参数，使用 index 方法来取出 0 位置的数据。

最后创建 Iconutil icns 的 Stage，点击浏览按钮选择保存路径: