前言

说起自动化,无论是在公司还是我们个人的项目中,都会用到或者编写一些工具来帮助我们去处理琐碎重复的工作,以节约时间提升效率,尤其是我们做前端开发会涉及诸如构建、部署、单元测试等这些开发工作流中重复的事项,本篇文章就是介绍如何利用 GitHub 提供的 Actions 来完成我们前端的发布自动化。

Github Actions

什么是 Actions

笔者个人理解为在某种条件下可被触发的任务,利用一个个任务(Action)就可组建成我们的工作流,想要更详细的介绍定义的同学可以移步 官方Action定义,有助获取更多的信息,这里就不搬运啦~

使用 Actions 的好处

前端自动化部署方案有多种,那么 GitHub 推出的 Actions 有什么魅力呢?在笔者看来,Action 在前端自动化发布有下面 3 点亮点:

  • 免费,Action 可与 GitHub 中的 Repo 进行绑定(下图所示,具体操作见下文),开箱即用:这就意味着我们不需要提供跑任务的机器,也不用管怎么把任务流对接起来,只要简单地熟悉规则,就能将项目 run 起来。而我们大部分觉得某个工具麻烦,是因为使用步骤繁琐,若要实现功能 A,还需做 B/C/D 操作才行,这时候我们要么放弃要么转向操作更简单的工具,毕竟省时省事才是开发第一要务~

  • 任务插件化,持续丰富的插件开源市场:得益于 Github 定义了 Actions 规范,让我们使用的 Actions 时都是按某种已知规则开发,这使得 Actions 更易于装配复用,很多优秀的开发者在制作完成工作流后,将自己开发的 Actions 放到 GitHub 的 Actions 集市上去,这样尚未完成自己常规工作流的开发,不需要额外开发这些已有重复逻辑直接使用现成的他人 Actions 即可。在笔者的实践过程中,前端的构建部署工作流,就是用的各类现有的 Actions 组合实现的。
  • 和 GitHub 集成好,可避免因为使用 Travis 等第三方工具引起额外的心智负担,在 GitHub 上可直接查看 CI/CD 的情况。

当然 Actions 还有许多其他好处,还待各位亲自尝试,至少使用过 Actions 的人都说好

使用 Github Action 进行前端自动化发布的更多相关文章

  1. 编写自己的 GitHub Action,体验自动化部署

    本文将介绍如何使用 GitHub Actions 部署前端静态页面,以及如何自己创建一个 Docker 容器 Action. 简介 Actions GitHub Actions 是 GitHub 官方 ...

  2. 通过 Github Action 实现定时推送天气预报

    偶然间,看到 GitHub Actions 教程:定时发送天气邮件 - 阮一峰的网络日志 这篇文章,没错,这个正好能打发自己的折腾之心,也能通过代码给生活引入一些变化. 还是在这里简单记录一下实现过程 ...

  3. Github 持续化集成 工作流 Npm包自动化发布

    Github 持续化集成 工作流 Npm包自动化发布 简介   持续集成指的是,频繁地(一天多次)将代码集成到主干. 它的好处主要有两个: 快速发现错误.每完成一点更新,就集成到主干,可以快速发现错误 ...

  4. 使用CI/CD工具Github Action发布jar到Maven中央仓库

    之前发布开源项目Payment Spring Boot到Maven中央仓库我都是手动执行mvn deploy,在CI/CD大行其道的今天使用这种方式有点"原始".于是我一直在寻求一 ...

  5. 使用github action发布hexo博客到云服务器

    目录 搭建Hexo博客 安装主题hexo-theme-bamboo 修改博客名称等信息 添加github action发布 1. 在github中创建自己的博客仓库 2. 设置Secrets 3. 在 ...

  6. 用webpack实现前端自动化构建

    什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,cs ...

  7. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  8. 你知道什么是 GitHub Action 么?

    本文是 GitHub Action 的入门教程,如您已有相关使用经验可以直接关掉. GitHub Action 是 GitHub 于 2018 年 10 月推出的一个 CI\CD 服务. 之前一直都是 ...

  9. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

随机推荐

  1. Witness组件详解

  2. JavaScript学习总结(九)事件详解

    转自:http://segmentfault.com/a/1190000002174034 事件处理程序 在DOM中定义了一些事件, 而响应某个事件的函数就叫事件处理程序(或事件侦听器).事件处理程序 ...

  3. win10安装revit失败,怎么强力卸载删除注册表并重新安装

    一些搞设计的朋友在win10系统下安装revit失败或提示已安装,也有时候想重新安装revit的时候会出现本电脑windows系统已安装revit,你要是不留意直接安装revit,只会安装revit的 ...

  4. 2016年3月13日 FXStreet首席分析师:欧元/美元下周走势展望

    FX168讯 欧元/美元在经历周初沉闷的走势之后,最终在欧洲央行出台一系列措施促进通货膨胀和经济增长之后怒涨至近一个月最高位.欧洲央行决议公布之前,投资者预期存款利率将下调10至15个基点,并可能进一 ...

  5. less 的使用方法总结

    一. 安装和使用 LESS 1.1 安装 使用命令行安装 LESS npm install -g less 1.2 使用 less 有多种的使用方法,在这里我向大家介绍最常用的俩种方法. 第一种是直接 ...

  6. nginx安装与fastdfs配置--阿里云

    上一篇文章:fastDFS 一二事 - 简易服务器搭建之--阿里云 做了fastDFS的服务安装和配置,接下来我们来看nginx的安装 第一步:安装nginx需要安装的一些环境: 1.例如: yum ...

  7. staruml百度网盘下载

    分享staruml官方百度网盘下载 下载时间:2019年9月4日 21:27:37  StarUML(简称SU),是一种创建UML类图,生成类图和其他类型的统一建模语言(UML)图表的工具.StarU ...

  8. 程序小白如何快速开发OA办公系统

    对于企业开发oa办公系统,成本高,周期长.有些企业花高价购买,购买后受制于软件商,很多功能只能按原来设计需求走,无法升级或者升级慢.这些由于软件商的开发效率低难以及时地响应企业的需求变化,所以就有可能 ...

  9. 连接器巨头Molex莫仕:替代品厂PK原厂

    序言:在中国电子产业,原厂PK替代品厂一直是一个极具话题性.美国在贸易战背景下,挤压中国的发展空间,迫使这一类企业要觉醒.当然受影响的不止中国电子企业,美国电子企业也一样. 在连接器这一领域,Mole ...

  10. Python神经网络编程笔记

    神经元 想一想便知道,当一个人捏你一下以至于你会痛得叫起来的力度便是神经元的阈值,而我们构建的时候也是把这种现象抽象成一个函数,叫作激活函数. 而这里便是我们使用sigmoid函数的原因,它是一个很简 ...