前端工程化之持续集成（5）- Vue单页应用打包构建发布一条龙服务
单页应用 push => 打包构建 => 发布 => 接oss => 自动刷新cdn => 消息通知
前端工程化之持续集成（1）- ci/cd/cli介绍
前端工程化之持续集成（2）- 一个常用的 cli
前端工程化之持续集成（3）- gitlab ci/cd 介绍
前端工程化之持续集成（4）- gitlab restful api & WebHook
前端工程化之持续集成（5）- Vue单页应用打包构建发布一条龙服务
前端工程化之持续集成（6）- vue多页应用模版、增量构建
前端工程化之持续集成（7）- 微信小程序
前端工程化之持续集成（8）- npm 组件
假设没有持续集成，我们一般开发是这个样子的，本地打包构建好后，自己拖到 nginx，或者 上传到 oss上去，这里有个问题是每个人本地环境都是不一样的，很容易出现问题，甚至有的人本地打包还一直不成功，质量也不好把控，成了个玄学问题，接下来就用 vue 的单页项目(用 react 一样 都是一个思路)做个例子，大家一起学习 基于 gitlab ci 的持续集成例子
首先，我在gitlab 上创建的 一个单页项目，也可以通过上面的 fe-cli 来通过模版创建
项目地址如下：
https://gitlab.com/gitbookdemo/vue-signle-page
我们主要关注 .gitlab-ci.yml
image: node:latest
# variables 是定义环境变量，可以在直接获取
variables:
TEST_PROJECT_NAME: "hucheng"
# stages 定义 执行步骤，包含了需要执行的job，类似第一步干嘛，第二步干嘛，接着干嘛
stages:
- install_deps
- build
- deploy
# install_deps 就是job，job下面的 stage 字段和上面一一对应起来
install_deps:
stage: install_deps
only: # 这里的 only 标记 在下面3个分支下面，push代码后，执行当前job，，only 支持 branch，tag，change，正则
- develop
- preview
- master
script: # script 就是你要执行的脚本了
- echo $TEST_PROJECT_NAME && npm install
build:
stage: build
only:
- develop
- preview
- master
artifacts: # artifacts 标记，当前job 执行完成后，在 gitalb 网页可以下载的文件，会出现个下载按钮，可以下载这个目录
paths:
- ./dist
script:
- npm run build
deploy:
stage: deploy
only:
- develop
- preview
- master
script:
- echo '开始上传到 oss'
# 这里是发布相关的脚本，建议通过这种远程获取的方式，做到热更新,如果放在当前项目目录每个改动起来不方便 https://gitlab.com/gitbookdemo/fe-script
- curl https://gitlab.com//api/v4/projects/18688576/repository/files/deploy.js/raw?ref=master | node "$type" dist
之前的打包构建已经说过，这里我们关注最下面的 deploy 这个脚本主要是 把 dist 目录上传到 阿里云oss，这样我们就完成了个最小闭环
这里需要强调的是 ，我把 deploy.js 通过 api 的方式获取，这样的好处就是，我们可以动态的更改 发布的逻辑，还记得我之前讲的 soucemap 那块么，这样某天需要处理soucemap 我们就可以添加一处，所有的项目就生效了
代码 push 后 我们可以去 gitlab 上看看
https://gitlab.com/gitbookdemo/vue-signle-page/pipelines
这样我们整个流程就处理完毕，完成了 push => 打包构建 => 发布 => 接oss => 自动刷新cdn => 消息通知 一条龙服务，大大减少了工作量
如果喜欢可以点个赞，点赞是我持续写下去的动力，也可以关注我的微信公众号
文章被以下专栏收录
