前言
已经有阮一峰老师的持续集成服务 Travis CI 教程,为什么还要写这篇文章?
原因有二:
文章内容有些过时
文章覆盖度不够,有些实践细节没写出来
由于以上原因,纵然可以笔者很快在Github集成Travis CI并成功构建,但在发布时却踩了一些坑,折腾一波才终于发布成功。故写下此文,旨在补充更多的细节,帮助他人少走弯路。
正文 免费购买Travis CI应用点击 https://github.com/marketplace/travis-ci,登录后免费购买(开源项目集成Travis CI不收费)。
选择关联仓库选择个人或组织名下需要关联Travis CI的Github仓库。
已经设置过的,想进行修改,可以在Github的 Personal settings-> Applications 中进入。
在项目根目录下新建 .travis.yml 文件
touch .travis.yml发布到github pages
下面展示一个可以发布到gh-pages的例子,可以稍做修改,复制粘贴使用。
该示例包含了:
指定node.js版本
使用yarn进行安装依赖及构建
对安装需要的依赖进行了缓存
设置了两个不含敏感信息的环境变量
设置了一个含有敏感信息的环境变量
把构建生成的文件部署至github pages
language: node_js node_js: - lts/* env: - API_SERVER=https://easy-mock.com/mock/5c1b3895fe5907404e654045/femessage-mock PUBLIC_PATH=http://levy.work/nuxt-element-dashboard/ # 默认是yarn, 如果有yarn.lock的话 install: - yarn # 默认是 yarn test script: - yarn build cache: yarn deploy: provider: pages skip-cleanup: true keep-history: true local-dir: dist on: branch: master github-token: $GITHUB_TOKEN
下面对文件进行说明。
language: node_js node_js: - lts/*
第1行指定了构建环境为node.js
第2、3行指定使用node.js最新的LTS版本
env: - API_SERVER=xxx PUBLIC_PATH=xxx
上面是设置两个环境变量。
注意,一次构建中传多个环境变量,必须写在同一行,使用空格分开。
env: - API_SERVER=xxx - PUBLIC_PATH=xxx
如果写成上面的形式,则会变成两个构建,每一个构建中只有一个环境变量。
install: - yarn script: - yarn build cache: yarn
上面指定使用yarn进行安装依赖,安装好后执行 yarn build 命令; 为yarn的依赖加速安装,开启了缓存。
下面是最关键的部署配置。
deploy: provider: pages github-token: $GITHUB_TOKEN skip-cleanup: true keep-history: true local-dir: dist on: branch: master
第2行指定部署到Github Pages,即仓库的 gh-pages 分支,请确保仓库的pages分支是 gh-pages , 相关操作可以看这里
第3行指定保留构建后的文件
第4行指定每次部署会新增一个提交记录再推送,而不是使用 git push --force
第5行指定构建后要部署的目录
第6、7行指定 master 分支有提交行为时,将触发构建后部署
第8行是部署需要用到的github-token,其中$GITHUB_TOKEN是变量,它可以在Travis CI个人仓库的setting页里设置,相关操作可以看这里
发布到npm再给出把node.js模块发布到npm的例子
主要是 deploy 这里有所不同
deploy: provider: npm email:# api_key: travis encrypt NPM_TOKEN --add deploy.api_key --com on: branch: master skip-cleanup: true
api_key指的的npm的token,可以登录npm后,在个人中心生成
因为不能泄露,所以要通过travis ci的命令行工具进行加密,执行以下命令
travis encrypt NPM_TOKEN --add deploy.api_key --com复杂例子
下面是一个复杂的例子,也是实际用到的配置,主要是
master分支才会触发构建
执行script命令前先读取shell中的环境变量,并生成.env文件
构建成功后
把模块发布到npm
把文档发布到gh-pages
branches: only: - master language: node_js node_js: - lts/* git: depth: 3 install: - yarn --frozen-lockfile before_script: echo OSS_KEY=$OSS_KEY OSS_SECRET=$OSS_SECRET OSS_BUCKET=$=OSS_BUCKET OSS_REGION=$OSS_REGION > .env script: - yarn build cache: yarn deploy: - provider: pages local-dir: docs github-token: $GITHUB_TOKEN skip-cleanup: true keep-history: true - provider: npm email: levy9527@qq.com api_key: $NPM_TOKEN skip-cleanup: true相关操作 使用travis命令行工具加密
加密要用到travis命令行工具,如果是在travis ci web界面设置环境变量,则可直接跳过。
下面给出mac环境下操作需要注意的点
1.安装命令:
brew install travis
否则很可能会出现问题
2.确保在 https://travis-ci.org/ sign in with github
3.然后在项目根目录里,执行命令
travis login —auto
4.修改git设置
vi .git/config
确保
[travis] slug = 是你在travis关联的仓库
5.添加加密环境变量
travis encrypt github-token=xxx --add deploy.github-token --com
因为笔者登录的travis ci域名是 https://travis-ci.com,所以要带参数 --com , 默认是 https://travis-ci.org
通过环境变量设置GITHUB_TOKEN首先为Travis CI新建一个token
点击生成新token
设置权限
复制生成的token。(记得先不要刷新或离开当前页面,否则token就看不见了,只能重新生成)
登录Travis CI, 进入要集成的项目设置页。
添加环境变量GITHUB_TOKEN
注意,这里的环境变量是通过bash设置、并在.yml里读取的,所以变量名是大写加下划线形式,这是bash的最佳实践,千万别写成github-token
GitHub Pages查看gh-pages分支的部署情况
进入仓库 Settings -> Options
往下翻看,可以看到效果
因为笔者自定义了域名,所以地址不是默认的 https://xxx.github.io/xxx
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105130.html
摘要:在实际开发项目中,有时我们会用到自定义按钮因为一个项目中,众多的页面,为了统一风格,我们会重复用到很多相同或相似的按钮,这时候,自定义按钮组件就派上了大用场,我们把定义好的按钮组件导出,在全局引用,就可以在其他组件随意使用啦,这样可以大幅度 在实际开发项目中,有时我们会用到自定义按钮;因为一个项目中,众多的页面,为了统一风格,我们会重复用到很多相同或相似的按钮,这时候,自定义按钮组件就...
摘要:代码整洁之道整洁的代码不仅仅是让人看起来舒服,更重要的是遵循一些规范能够让你的代码更容易维护,同时降低几率。另外这不是强制的代码规范,就像原文中说的,。里式替换原则父类和子类应该可以被交换使用而不会出错。注释好的代码是自解释的。 JavaScript代码整洁之道 整洁的代码不仅仅是让人看起来舒服,更重要的是遵循一些规范能够让你的代码更容易维护,同时降低bug几率。 原文clean-c...
对比内容UCloudStackZStackVMwareQingCloud腾讯TStack华为云Stack优势总结•基于公有云自主可控•公有云架构私有化部署•轻量化/轻运维/易用性好•政府行业可复制案例轻量化 IaaS 虚拟化平台•轻量化、产品成熟度高•业内好评度高•功能丰富、交付部署快•中小企业案例多全套虚拟产品及云平台产品•完整生态链、技术成熟•比较全面且健全的渠道•产品成熟度被市场认可,市场占...
摘要:能跨平台地设置及使用环境变量让这一切变得简单,不同平台使用唯一指令,无需担心跨平台问题安装方式改写使用了环境变量的常见如在脚本多是里这么配置运行,这样便设置成功,无需担心跨平台问题关于跨平台兼容,有几点注意 cross-env能跨平台地设置及使用环境变量, cross-env让这一切变得简单,不同平台使用唯一指令,无需担心跨平台问题 1、npm安装方式 npm i --save-de...
摘要:引入的模块引入的使用将打包打包的拆分将一部分抽离出来物理地址拼接优化打包速度压缩代码,这里使用的是,同样在的里面添加 const path = require(path); //引入node的path模块const webpack = require(webpack); //引入的webpack,使用lodashconst HtmlWebpackPlugin = require(ht...
阅读 3378·2021-10-08 10:15
阅读 5290·2021-09-23 11:56
阅读 1410·2019-08-30 15:55
阅读 424·2019-08-29 16:05
阅读 2709·2019-08-29 12:34
阅读 2013·2019-08-29 12:18
阅读 856·2019-08-26 12:02
阅读 1626·2019-08-26 12:00