travis-ci是什么?

一个使用yaml格式配置用于持续集成完成自动化测试部署的开源项目

官网:https://travis-ci.org/

使用travis-ci集成vue.js项目

首先,您需要一个github账号 and 一个vue.js项目~ 没有的话试试这个啊metools

1. 登录Github并拥有一个项目

登录github 然后Star,Fork metools

当然可以先去看看这个项目是啥..http://tools.yimo.link/

2. 前往travis-ci官网

使用Github账号登录

3. 登录成功回到用户中心

默认会同步一部分仓库,如果太多的话需要点击Sync account进行同步

4. 开启对 metools 项目的集成并进入设置页面



如下图所示,根据需要配置构建信息

添加github的Token到环境变量中,用户名,邮箱也可添加进去,这样配置文件中就可以使用了

生成Token见步骤5.注意:配置私密的环境变量时一定要加密,因为会显示在日志中且能够被他人看到



根据步骤6的配置,还需要添加一些环境变量使起更方便(地址别填错了)



图中配置依次为:

  1. GH_REF:仓库地址
  2. GH_TOKEN:生成的令牌
  3. P_BRANCH:推送的pages分支 //这里填的时候一定要注意,一般来讲就是 gh-pages 。别手抖写个master。血淋淋的教训~
  4. U_EMAIL:邮箱
  5. U_NAME:名称

5. Github生成访问令牌 (即添加授权)

访问令牌的作用就是授权仓库操作权限 https://github.com/settings/tokens

Github>settings>Personal access tokens> Generate new token > Generate token> Copy Token

6. .travis.yml 文件的简单配置

.travis.yml文件的作用就是在代码提交的时候travis-ci会根据该配置文件执行配置的任务

在项目根目录中创建(或修改).travis.yml 文件,其中${环境变量}为环境变量在travis中配置即可

language: node_js
# nodejs版本
node_js:
- '6' # Travis-CI Caching
cache:
directories:
- node_modules # S: Build Lifecycle
install:
- npm install before_script: # 无其他依赖项所以执行npm run build 构建就行了
script:
- npm run build after_script:
- cd ./dist
- git init
- git config user.name "${U_NAME}"
- git config user.email "${U_EMAIL}"
- git add .
- git commit -m "Update tools"
- git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}
# E: Build LifeCycle #指定分支,只有指定的分支提交时才会运行脚本
branches:
only:
- master
env:
global:
# 我将其添加到了travis-ci的环境变量中
#- GH_REF: github.com/yimogit/metools.git

7. 自动构建项目

修改完成,并推送到github后,就可以在travis-ci.org中看到项目开始构建了(以后每次推送代码到仓库后都将会自动构建项目)



构建完成日志

构建完成。在设置中可以看到默认已经将gh-pages分支部署到pages,访问https://用户名.github.io/metools/即可预览效果。

若构建失败,可以通过travis-ci中项目面板右上角的 Restart build 重新构建

使用travis-ci自动部署github上的项目的更多相关文章

  1. 使用Travis CI自动部署Hexo到GitHub

    原文链接(转载请注明出处):使用Travis CI自动部署Hexo到GitHub 前言 使用 hexo + gitPages 搭建个人博客的人都知道,每当要发表一篇博文,第一步得手动使用 hexo g ...

  2. 使用Travis CI自动部署博客到github pages和coding pages

    每次换系统或换电脑之后重新部署博客总是很苦恼?想像jekyll那样,一次性部署完成后,以后本地不用安装环境直接 git push 就能生成博客?那推荐你应该使用使用 Travis CI了. 这篇文章我 ...

  3. 使用Travis CI自动部署Hexo博客

    自从使用GitHub Pages和Hexo来发布博客之后,不得不说方便了许多,只需要几个简单的命令博客就发布了.但在不断的使用中发现每次的发布操作也挺耗时的. 我一般的操作是将平时整理好的md文件放到 ...

  4. 使用 Travis CI 自动部署 Hexo 站点至 GitHub Pages

    Hexo 与 GitHub Pages 安装配置请参考:Hexo 与 GitHub Pages 本文源码与生成的静态文件在同一项目下,源码在 source 分支,静态文件在 master 分支 新增 ...

  5. jenkins之自动化部署github上maven项目

    部署流程:将代码从github上拉取下来,使用maven打包,将打包后的jar通过ssh发送到服务器上,然后构建docker镜像,运行容器. 1.安装插件 如果是第一次使用jenkins,需要检查并确 ...

  6. Gitlab CI 自动部署 asp.net core web api 到Docker容器

    为什么要写这个? 在一个系统长大的过程中会经历不断重构升级来满足商业的需求,而一个严谨的商业系统需要高效.稳定.可扩展,有时候还不得不考虑成本的问题.我希望能找到比较完整的开源解决方案来解决持续集成. ...

  7. 如何从eclipse中下载并导入Github上的项目

    eclipse导入项目,方法就是点击File ->Import,选择Existing Projects into Workspace 但前提是,你导入的这个项目原本就是用eclipse的构建的, ...

  8. 在GitHub上管理项目

    在GitHub上管理项目 新建repository 本地目录下,在命令行里新建一个代码仓库(repository) 里面只有一个README.md 命令如下: touch README.md git ...

  9. 【转载】在GitHub上管理项目

    在GitHub上管理项目 新建repository 本地目录下,在命令行里新建一个代码仓库(repository) 里面只有一个README.md 命令如下: touch README.md git ...

随机推荐

  1. css3转盘抽奖

    做到一个活动,需要转盘抽奖,于是想到使用css3的动画效果,其中主要包含transition的动画过渡,transform的rotate的旋转效果,在这里只用到2d的旋转, 特别强调的是,因为需要和后 ...

  2. javaCV开发详解之技术杂烩:javaCV能帮我们做什么?能实现什么功能?ffmpeg和openCV能实现功能,javaCV如何做到更快、更简单的实现相应的功能?等等一堆实用话题

    前言: 该篇文章旨在帮助刚接触javaCV的盆友系统的认识音视频.javaCV.图像处理相关的体系知识和一些实用的知识. 序: javaCV早期因为内置了openCV库,所以常用来做图像识别应用,现在 ...

  3. oracle 体系结构简介

    1.1.SGA(system global area) SGA是oracle Instance的基本组成部分,在示例启动是分配.是一组包含一个oracle实例的数据和控制信息的共享内存结构.主要用于存 ...

  4. <iOS 组件与框架> -- UIKit Dynamics

    UIKit Dynamics 结合 『iOS 组件与框架 』一书.总结的知识点与demo demo 地址: GitHub地址 一.概述 1.UIKit Dynamics 是 iOS 7 新增的内容.其 ...

  5. easygen通用代码生成框架[开源]

    什么东东 用过mybatis的同学都知道,手工写mapper和xml是一件很痛苦的事儿,幸好官方提供了Mybatis-Generator,但是这家伙生成的东西不开放不方便修改,而且项目中的代码生成需求 ...

  6. tomcat之 Tomcat 7.0.78 单机多实例配置

    前言:JDK(JavaDevelopment Kit)是Sun Microsystems针对Java开发员的产品.自从Java推出以来,JDK已经成为使用最广泛的javaSDK. JDK是整个Java ...

  7. spring4 之 helloworld

    1.从官网下载相关JAR包 spring-framework-4.2.1.RELEASE-dist(下载地址:http://maven.springframework.org/release/org/ ...

  8. .net Kafka.Client多个Consumer Group对Topic消费不能完全覆盖研究总结(一)

    我们知道Kafka支持Consumer Group的功能,但是最近在应用Consumer Group时发现了一个Topic 的Partition不能100%覆盖的问题. 程序部署后,发现Kafka在p ...

  9. Python读入CIFAR-10数据库

    CIFAR-10可以去http://www.cs.toronto.edu/~kriz/cifar.html下载(记得下载python格式) CIFAR-10数据组成: 训练集和测试集分别有50000和 ...

  10. js字符串转换为数字 总结

    a. 将一个字符串转换为数字的一种缺少些技巧但是很清楚明白的方法就是:把Number()构造函数作为一个函数来调用:  var number = Number(string_value); b. pa ...