Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >travis(1)npm通用travis配置

travis(1)npm通用travis配置

作者头像
suveng
发布于 2019-09-17 02:24:11
发布于 2019-09-17 02:24:11
1.1K00
代码可运行
举报
运行总次数:0
代码可运行

文章目录

  • travis(1)npm通用travis配置
    • 简介
    • node.js与TravisCI集成
      • 1. 登陆github 以及 一个项目
      • 2. 通过github登陆travisCI官网
      • 3. 配置travisCI
      • 4. 配置github page
      • 5. push 并 自动构建
    • 参考文章
    • 我的主页

travis(1)npm通用travis配置

简介

Travis CI是在软件开发领域中的一个在线的,分布式的[1]持续集成服务,用来构建及测试在GitHub[2]托管的代码。这个软件的代码同时也是开源的,可以在GitHub上下载到[3],尽管开发者当前并不推荐在闭源项目中单独使用它。[4]

它提供了多种编程语言的支持,包括RubyJavaScriptJavaScalaPHPHaskellErlang在内的多种语言[5]。许多知名的开源项目使用它来在每次提交的时候进行构建测试,比如Ruby on RailsRubyNode.js[5][6]

------wiki

node.js与TravisCI集成

1. 登陆github 以及 一个项目

要使用travisCI工具,首先必须要有一个github的账号,自己去注册!如果不知道git怎么使用,百度搜索廖雪峰git教程

其次,注册完成后,在你自己的账号下创建一个项目仓库,并把你的vue项目代码提交到上面。

2. 通过github登陆travisCI官网

进入travisCI官网 ,使用github登录。

同步你的仓库。

选择其中一个仓库,进行设置。

这里需要设置一些变量,以便第3步的配置。类似下面界面,如果后面travis界面更新了,自己找方法设置,这里贴图。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
GH_REF:仓库地址
GH_TOKEN:github生成的令牌,具体百度'生成github 令牌'
P_BRANCH:推送的部署了pages的分支名称
U_EMAIL:git.email邮箱
U_NAME:git.username名称

3. 配置travisCI

这里贴出npm的通用配置,因为里面的配置,emm…新手可能看不懂,没关系,现在去了解一波,然后回来设置,天资聪慧的你可能光是看英文就懂了呢。这里给出阮一峰的教程

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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:
    - develop
env:
 global:
   # 我将其添加到了travis-ci的环境变量中

4. 配置github page

emm…这个是要去github的仓库上面的settings里面配置一下,选择一个分支作为源就ok了。弄这个的原理就是我们的travis的脚本里面,npm run build 后的 dist的页面会拷到这个分支里面。然后就可以展示了。具体可以参考

注意: 图片和样式的路径问题,自己手动配置一下。

5. push 并 自动构建

现在只要对本地的develop分支提交代码,travis就会对我们的代码进行 npm run build 编译。并且将dist 的内容push --force 到githu pages 的分支,现在就可以通过github的站点域名访问我们的项目了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年02月22日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。
半指温柔乐
2018/09/11
1.6K0
【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )
E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器 选择 匹配的父容器 中的 第一个 E 类型标签 子元素 ;
韩曙亮
2023/04/24
1.3K0
【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )
CSS基础--属性选择器、伪类选择器
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .red{ color: red; } .blue{ color: blue; } .darkred{ color: darkred;
eadela
2019/09/29
1K0
CSS选择器详解
最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外! 看来这基础的东西,大家都说很重要,可真正能静下心来去看的并不多,更别说在项目中灵活使用了! 元素选择器 通配选择器 * { sRules } 选定文档所有的元素 /** 设置所有元素为红色 **/ * {   color: red; } <div>我是div</div> <p>我是p</p> 类型选择器 E { sRules } 选定指定的文
laixiangran
2018/04/11
2.9K0
css3选择器
属性选择器 E[attr]只使用属性名,但没有确定任何属性值 E[type="text"]指定属性名,并指定了该属性的属性值 E[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写 E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的 E[attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的 E[attr="value"]指定了属性名,并且有属性值,而且属值中包含了value 结构性伪类选择器 E:nth-child(n) 表示E父元素中的第n个字节点 p:nth-child(odd){background:red}/匹配奇数行/ p:nth-child(even){background:red}/匹配偶数行*/ p:nth-child(2n){background:red} E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算 E:nth-of-type(n) 表示E父元素中的第n个字节点,且类型为E E:nth-last-of-type(n)表示E父元素中的第n个字节点,且类型为E,从后向前计算 E:empty 表示E元素中没有子节点。注意:子节点包含文本节点 E:first-child 表示E元素中的第一个子节点==nth-child(1) E:last-child 表示E元素中的最后一个子节点 E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的 E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的 E:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点 E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点
河湾欢儿
2018/09/06
4490
css3 选择器
  以前学习css的时候总是看见一个效果就看一下,没有系统的学习,最近看见了这个css3的网站,打算系统学习下,今天要跟大家分享的是css3的选择器。
py3study
2020/01/15
5570
CSS3选择器(全部)[通俗易懂]
CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,让编写代码更加轻松。
全栈程序员站长
2022/09/14
7470
css3 nth-child选择器
大概大家都知道上面的使用方法,但是有一点搞不清楚的话,使用起来就会很困惑。那就是n是什么?
frontoldman
2019/09/02
5630
css3新增选择器
一、css3之前的选择器 ID选择器 类选择器 包含选择器(E F) 伪类选择器(:link,visited,hover,active,focus,first-child) 伪元素选择器(::first-line,first-letter,before,after) 通配选择器(.) 属性选择器(foo[name='martin']) 子包含选择器(E>F) 相邻兄弟选择器(E+F) 二、css3新增选择器 新增属性选择器: E[foo^='bar'] 匹配E元素,该元素包含foo属性,且foo属性值以ba
IT人一直在路上
2019/09/18
5710
CSS3选择器介绍及用法总结[通俗易懂]
CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注: ele代表element元素 attr代表attribute属性,val代表value属性值 :xxx都属于伪类选择器,::xxx都属于伪元素选择器 有名字的选择器我尽量细分了 #CCS1选择器#
全栈程序员站长
2022/09/14
1.5K0
CSS3选择器介绍及用法总结[通俗易懂]
CSS(CSS3)选择器(2)
该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器:                         24:E ~ F,匹配任何E元素之后的同级F元素。 div ~ p{ background-color:#00FF00; } 二.属性选择器:                         25:E[att ^= val],匹配属性att的值以”val“开头的元素。 [id ^= start]{ background-color:red; ]
zaking
2018/05/02
1K0
从零开始学 Web 之 CSS3(一)CSS3概述,选择器
CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
Daotin
2018/08/31
9930
零基础学前端开发之CSS3深入选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(。
张哥编程
2024/12/19
840
零基础学前端开发之CSS3深入选择器
常用的CSS3选择器
CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。
全栈程序员站长
2022/09/14
4.2K0
常用的CSS3选择器
CSS选择器
在模块定义不太稳定的阶段,浏览器会采用厂商前缀实现某个特性。它允许早起采纳者试用浏览器实现的新属性。
奋飛
2019/08/15
1.5K0
CSS3选择器–结构性伪类选择器
在学习结构性伪类选择器之前,先了解2个概念:CSS中的伪类选择器和伪元素:
全栈程序员站长
2022/09/14
5680
CSS3选择器–结构性伪类选择器
前端学习(15)~css3学习(九):选择器详解
CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。
Vincent-yuan
2020/03/19
5320
CSS选择器如此之多,你了解多少?
css选择器非常之多,常见的如class选择器,id选择器,标签选择器等等。每个的用法都有所区别,虽然很多都能到达同样的效果,但还是有一些更优的选择。
Javanx
2019/09/04
4910
CSS入门5-选择器
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
love丁酥酥
2018/08/27
8600
HTML5选择器
注意:IE6-8不支持":checked",":enabled",":disabled"这三种选择器。著作权归作者所有。
踏浪
2019/07/31
1.5K0
相关推荐
第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验