关于github-actions:Github-Actions-实战提高生产力

GitHub Action 继续集成服务推出有一段时间了，目前曾经收费凋谢应用，因为集体我的项目都是放在Github上有点多，应用它来公布、测试、部署，是极大的进步了生产力。

上面通过一些实例来阐明，咱们能够在那些中央能够进步生产力。

入门

咱们只须要在我的项目的 .github/workflows/ 目录下配置 yml 文件，配置触发事件既能够，例如 .github/workflows/ci.yml 中，咱们在 master 分支进行 push，就能够登程这个工作流。

name: CIon:  push:    branches:      - master

为这个工作流增加一些工作，通过应用 actions/checkout 拉代码，应用 actions/setup-node 装置制订的 nodejs 版本

name: CIon:  push:    branches:      - masterjobs:  build-deploy:    runs-on: ubuntu-18.04    steps:      - uses: actions/checkout@v2      - uses: actions/setup-node@v2        with:          node-version: 14

你能够增加更多的步骤实现简略的测试，例如装置依赖，编译代码，运行测试用例等：

jobs:  build-deploy:    runs-on: ubuntu-18.04    steps:      - uses: actions/checkout@v2      - uses: actions/setup-node@v2        with:          node-version: 14      - run: npm install      - run: npm run build      - run: npm run coverage      - run: npm run bundle      - run: npm run bundle:min      - run: npm run doc

主动打 tag

配置一个步骤，通过判断 package.json 中的变动主动创立一个 tag。

- name: Create Tag  id: create_tag  uses: jaywcjlove/create-tag-action@v1.3.6  with:    package-path: ./package.json

主动生成 released

通过判断 tag 创立胜利是否胜利(if: steps.create_tag.outputs.successful)，来主动创立一个 released

- name: Create Release  uses: ncipollo/release-action@v1  if: steps.create_tag.outputs.successful  with:    token: ${{ secrets.GITHUB_TOKEN }}    name: ${{ steps.create_tag.outputs.version }}    tag: ${{ steps.create_tag.outputs.version }}

主动生成 released 的详情形容

应用 jaywcjlove/changelog-generator 获取commit的日志，在创立 released 的时候应用

- name: Generate Changelog  id: changelog  uses: jaywcjlove/changelog-generator@v1.5.0  with:    head-ref: ${{steps.create_tag.outputs.version}}    filter-author: (renovate-bot|Renovate Bot)    filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'

- name: Create Release  uses: ncipollo/release-action@v1  if: steps.create_tag.outputs.successful  with:    token: ${{ secrets.GITHUB_TOKEN }}    name: ${{ steps.create_tag.outputs.version }}    tag: ${{ steps.create_tag.outputs.version }}    body: |      Comparing Changes: ${{ steps.changelog.outputs.compareurl }}        ${{ steps.changelog.outputs.changelog }}

主动生成一个简略的文档网站

你能够通过脚本生成它(index.html)：

- name: Compress uiw Example.  run: |    cat > index.html << EOF    <!DOCTYPE html><html lang="en">    <head>    </head>    <body>    <div class="footer">      Licensed under MIT. (Yes it's free and open-sourced)    </div>    </body></html>    EOF

如果你只想通过 README.md 生成一个简略的文档网站，你能够应用 jaywcjlove/markdown-to-html-cli 进行配置主动生成简略的 index.html 动态文件进行公布即可

- name: Converts Markdown to HTML  uses: jaywcjlove/markdown-to-html-cli@main  with:    source: README-zh.md    output: website/index.html    github-corners: https://github.com/jaywcjlove/markdown-to-html-cli    favicon: data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22></text></svg>

主动公布动态资源

GitHub 提供一个收费的动态资源托管性能，咱们只须要将动态资源提交到某个分支，进行配置即可。这里咱们应用 peaceiris/actions-gh-pages 将 build 目录中编译好的动态资源，提交到 gh-pages 分支中，通过配置即能够间接预览它。

- name: Deploy  uses: peaceiris/actions-gh-pages@v3  with:    github_token: ${{ secrets.GITHUB_TOKEN }}    publish_dir: ./build

依据下图进行配置动态资源所在的地位

文档历史记录预览

在每次生成的 releases 中展示以后的文档预览，这很好的获取到不通版本的文档，这个十分有用。咱们不须要干什么就能够依据 git 历史记录，预览历史的文档源码，然而心愿他领有预览工具，这个时候须要用到 https://raw.githack.com/ 这个 CDN 工具了，只需通过 jaywcjlove/changelog-generator 输入的 hash 拼接一下，就能够了。

https://raw.githack.com/uiwjs/react-codemirror/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html

# 如果你须要获取最新的 gh-pages 分支 hash# 这须要你在提交动态资源之后- name: Generate Changelog  id: changelog  uses: jaywcjlove/changelog-generator@v1.5.0  with:    head-ref: ${{steps.create_tag.outputs.version}}    filter-author: (renovate-bot|Renovate Bot)    filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'- name: Create Release  uses: ncipollo/release-action@v1  if: steps.create_tag.outputs.successful  with:    token: ${{ secrets.GITHUB_TOKEN }}    name: ${{ steps.create_tag.outputs.version }}    tag: ${{ steps.create_tag.outputs.version }}    body: |      Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/react-codemirror/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html

主动上传 npm 包

应用 JS-DevTools/npm-publish 判断 package.json 中的版本是否发生变化，主动在 npm 上公布版本。

- uses: JS-DevTools/npm-publish@v1  with:    token: ${{ secrets.NPM_TOKEN }}    package: ./package.json

配置 NPM_TOKEN ，如果你的仓库在 GitHub 组织中，只须要组织外面设置一次就好了，集体的配置如下：

主动生成贡献者图标

有个更简略的工具 contrib.rocks 配置URL，间接在你的自述文件中援用就能够，然而这个不够酷，因为有机器人贡献者须要过滤，不想依赖一个第三方服务，咱们只须要这个贡献者头像汇合图片就能够了，这个时候咱们应用 jaywcjlove/github-action-contributors 去生成它，将它提交到 gh-pages 动态资源分支中，在页面应用预览即可

- name: Generate Contributors Images  uses: jaywcjlove/github-action-contributors@main  with:    filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\])    output: build/CONTRIBUTORS.svg    avatarSize: 42

## ContributorsAs always, thanks to our amazing contributors!<a href="https://github.com/jaywcjlove/github-action-contributors/graphs/contributors">  <img src="https://jaywcjlove.github.io/github-action-contributors/CONTRIBUTORS.svg" /></a>Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).

残缺示例参考

@kktjs/kkt/.github/workflows/ci.yml
@uiwjs/react-codemirror/.github/workflows/ci.yml