使用AppVeyor和Travis，自动构建和发布 Electrion应用

前言

Electron应用在开发以后，本地运行 build 只能打包相对于的环境。如在 Mac 下运行只能打包 dmg 不能兼顾其他平台。为了解决这个痛点，就有了这篇文章。

简单说一下构建和发布流程：主要是配置构建工具 electron-builder, 配置 Travis 以构建 Linux 和 Mac 应用，配置 AppVeyor 以构建 Windows 应用，当提交代码到 Github 后，CI 自动拉取代码，运行 electron-builder 相关命令，生成个平台的安装包，并将安装包推送到 Github Releases 中。

release包

在使用 git 提交代码后，CI 自动构建并发布。so easy~ 顺表说一下，对于开源项目，Travis 和 AppVeyor 是能够免费使用的。

准备条件

GitHub 账户
AppVeyor 账户
Travis 账户
基于 Electron-vue 脚手架构建的项目(非必须)
项目基于 electron-builder 打包(非必须)

配置项目

编辑本地的 package.json

{
  "name": "electron-v2er",
  "version": "0.0.1",
  "author": "ruicky <xxx@163.com>",
  "homepage":"https://github.com/ruicky/electron-v2ex",
  "description": "An electron-vue project",
  "license": "MIT",
  "main": "./dist/electron/main.js",
  "scripts": {
        "build": "node .electron-vue/build.js && electron-builder --publish always"
      	 ...
    }
    
  ...
  
   "mac": {
      "icon": "build/icons/v2ex.icns",
      "category": "public.app-category.utilities"
    },
    "win": {
      "icon": "build/icons/v2ex.ico",
      "target": "nsis"
    },
    "linux": {
      "icon": "build/icons",
      "category": "Utility",
      "target": [
        "deb",
        "AppImage"
      ]
    }
    
    ...
    
}

解释：

其中的 name(项目名称) version(项目版本) author(作者信息) description (项目描述) license(开源协议) 都需要填写，否则在编译 linux 版本的时候会报错。填写或修改成自己的参数即可。可参考 Metadata 参数解释
在 scripts 中的 build 添加 --publish always 可参考 How to Publish 里的参数解释

生成 GitHub 的 GH_TOKEN

electron-builder 需要 GH_TOKEN(Github Personal access token) 才有权限上传文件到 Github Releases 中。可在 Personal access tokens 页面进行生成，由于只会显示一次，注意保存好。在创建的时候只需要勾选 repo > public_repo 即可。
生成GH_TOKEN

配置 CI

AppVeyor

在本地项目根目录中添加文件 appveyor.yml,具体可参考一下的示例配置，几乎不用修改。

version: 0.1.{build}

branches:
  only:
    - master

image: Visual Studio 2017
platform:
  - x64

cache:
  - node_modules
  - '%APPDATA%\npm-cache'
  - '%USERPROFILE%\.electron'
  - '%USERPROFILE%\AppData\Local\Yarn\cache'

init:
  - git config --global core.autocrlf input

install:
  - ps: Install-Product node 8 x64
  - git reset --hard HEAD
  - yarn
  - node --version

build_script:
  #- yarn test
  - yarn build

test: off

创建项目
- 然后打开 Appveyor 项目页，点击左边的 NEW PROJECT 按钮，然后在选择你要自动化的仓库。
设置
- 回到首页选择创建好的项目
- 点击 Settings tab
- 在 Environment 中填写 GH_TOKEN 的值，点击页面最下面的“保存”
- 在 Deployment 中配置部署的结果页，选择 GitHub Releases 并填写之前生成好的 GH_TOKEN，点击页面最下面的“保存”

Travis

在项目的根目录创建文件 .travis.yml 然后参考下面的配置写入，大部分不用修改。

# Commented sections below can be used to run tests on the CI server
# https://simulatedgreg.gitbooks.io/electron-vue/content/en/testing.html#on-the-subject-of-ci-testing
osx_image: xcode8.3
sudo: required
dist: trusty
language: c
matrix:
  include:
  - os: osx
  - os: linux
    env: CC=clang CXX=clang++ npm_config_clang=1
    compiler: clang
cache:
  directories:
  - node_modules
  - "$HOME/.electron"
  - "$HOME/.cache"
addons:
  apt:
    packages:
    - libgnome-keyring-dev
    - icnsutils
    #- xvfb
before_install:
- mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([
  "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz
  | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull
- if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi
install:
#- export DISPLAY=':99.0'
#- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
- nvm install 9
- curl -o- -L https://yarnpkg.com/install.sh | bash
- source ~/.bashrc
- npm install -g xvfb-maybe
- yarn
script:
#- xvfb-maybe node_modules/.bin/karma start test/unit/karma.conf.js
#- yarn run pack && xvfb-maybe node_modules/.bin/mocha test/e2e
- yarn run build
branches:
  only:
  - master