文章目錄

• • CI/CD 工具
  • Travis CI 使用
  • • 1. 注冊
    • 2. 新建Github倉庫
    • 3. 創建vue項目
    • 4. 配置Travis CI
    • 5. 發布到GitHub pages
  • Travis CI總結

CI/CD 工具

上次介紹了Circle CI的使用，這篇就來介紹下Travis CI。

Travis CI 使用

官網：https://www.travis-ci.com/
https://travis-ci.org/(這是舊的馬上不用了)

1. 注冊

點擊右上角Sign In按鈕，點擊SIGN IN WITH GITHUB按鈕：

接著就是和Circle CI一樣，授權：

輸入密碼后，就進來了：

按照提示，第一次進來需要點擊右邊的ACTIVATE ALL REPOSITORIES USING GITHUB APPS，然后點擊Approve & Install：

然后再選一次GitHub賬號登錄，就OK了：

2. 新建Github倉庫

倉庫名稱為：travisci-demo , 同樣選擇public

3. 創建vue項目

# 創建vue項目 travisci-demo vue create travisci-demo # 初始化git git init # 添加遠程倉庫 git remote add origin https://github.com/zy128xxxxxx/travisci-demo.git

然后我們在項目根目錄來添加一個travis ci的配置文件.travis.yml：

language: node_js node_js:- "10"cache:yarn: trueinstall:- yarn installscript:- npm run build

最后我們把代碼都提交到Github：

git add . git commit -m "first commit" git push origin master

4. 配置Travis CI

點下這個Sync account按鈕，就可以看到我們新建的項目了：

點擊右邊的Settings按鈕，先手動觸發一次構建：

Tips：因為推送代碼的時候還沒有設置Travis CI 所以這里先手動觸發一次

好的，經過58s的時間構建好了：

看看構建過程：

很棒棒有木有~

5. 發布到GitHub pages

看官方文檔得知，需要設置一個GitHub token：

GitHub 依次點選：頭像->Settings->左側Developer settings->左側Personal access tokens，點擊Generate new token：

寫個名字，然后勾選repo，然后點擊最后的Generate token按鈕：

然后復制這個token（后面配置有用）
修改.travis.yml配置文件：

language: node_js node_js:- "10"cache:yarn: trueinstall:- yarn installscript:- npm run builddeploy:provider: pagesskip_cleanup: truelocal_dir: dist/github_token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variablekeep_history: truename: zy128xxxxxxemail: 151xxxxx@qq.comon:branch: master

最后一段deploy代碼是官方文檔有介紹的，主要字段local_dir是生成打包的目錄，github_token就是我們剛才在GitHub生成的token(但是這個是通過環境變量來設置的，不能再這里寫死，否則提交到github大家都知道了)，name和email填自己的就行

別忘了設置下vue的配置文件，在項目根目錄新建vue.config.js：

module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/travisci-demo':'/' }

接下來就設置環境變量，點擊Settings，然后在Environment Variables 添加GITHUB_TOKEN變量，值就是剛才生成的token，點擊Add按鈕即可：

萬事俱備，現在就來提交代碼了：
執行push后等大概一分鐘左右，Travis CI自動開始構建了，大概一分鐘構建成功了：

然后我們去GitHub 找一下發布地址：

點一下：

Travis CI總結

• GitHub 賬號注冊，授權，控制面板中同步項目
• 新建項目添加.travis.yml文件
• 配置環境變量GITHUB_TOKEN發布到github_pages

相對于circle ci 要簡單些，有興趣的童鞋可以看下Circle CI的文章：前端自動化構建部署之Circle CI使用

總結

以上是生活随笔為你收集整理的【请收藏】自动化构建部署之Travis CI使用（GitHub/Travis CI/Vue）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。