Jenkins Vue项目自动构建以及构建后续操作
Jenkins在linux上的安装教程:http://www.ityouknow.com/springboot/2017/11/11/springboot-jenkins.html
另外,关于在windows上的安装请自行百度...
下面贴下Jenkins构建前端Vue项目的配置:
新建任务:点击左上角的 新建任务


General

源码管理(这个项目用的是svn,注意要创建的图中的全局凭证,也就是你的svn账户和密码)

构建触发器

我们是手动点击 立即构建 按钮进行构建,你可以设置定时构建和轮询构建
构建环境

将 Add timestamps to the Console Output 打上勾,会在构建时的控制台中打印出时间
构建

构建后操作
点击增加构建后操作步骤

选择 Execute Scripts(需要Jenkins插件支持:Build Step 和 Post build task )

然后点击, Add post build step

点击Add build step,选择执行Shell

出现如下

文本框内需要些一些脚本,会在构建成功之后执行。这里说下我们的解决办法,将前端构建好的文件告诉我们上线管理系统,我们通过自动上线管理系统进行上线
#!/bin/bash
NAME="electric-bicycle-web-www"
VERSION=`svnversion` cd /home/szhq/.jenkins/jobs/electric-bicycle-web-www/workspace/dist/
pwd
ls buildme -n $NAME -v $VERSION -d /home/szhq/.jenkins/jobs/electric-bicycle-web-www/workspace/dist/
构建后操作也可以通过ssh将打完包的文件上传你的服务器(这样子简单粗暴,但是上线没有版本控制,也没有办法进行回滚)
下面我贴一下构建直接上线的配置:选择Send build artifacts over SSH(需要Jenkins插件: Publish Over SSH)

在SSH Server Name字段选择你的预先配置好的服务器(创建过程: Jenkins -> 系统管理 -> 系统设置 -> Publish over SSH -> SSH Servers,点击新增)
在Transfers 中:
Source files 表示上传到服务器的文件的路径,我这里写的当前项目根目录下dist目录下的所有文件,包括static文件夹和index.html,具体的匹配规则请自行查询有关资料
Remove prefix 表示上传到服务器需要删除的本地路径前缀,这里表示将dist前缀移除,上传到服务器的只有static文件夹和index.html
Remote directory 表示要删除的服务器上的目录路径,这里是每次上传时将之前的文件全部删除,用新的文件来替换
Exec command 表示执行的shell脚本,前端暂时需要,感觉这个一般是给部署后台用的,上传jar包后启动服务
按照上边配置完成后,构建完成后会自动将文件更新到服务器上...
Jenkins Vue项目自动构建以及构建后续操作的更多相关文章
- 如何在输入命令行npm run dev 之后vue项目自动在浏览器打开
使用代码编辑器打开vue项目代码,在config文件夹里面找到index.js 将里面的:autoOpenBrowser: false, 修改为 :autoOpenBrowser: true, 这个方 ...
- vue项目自动构建工具1.0,支持多页面构建
该工具适用于超多项目开发,每个项目不用都安装依赖,所有依赖都安装在ffk命令项目中,对于多分支拉到本地进行开发,亦有益处.对于多页面开发,也是相当便利,不用手动撸entry和plugin. git: ...
- Vue项目自动转换 px 为 rem,高保真还原设计图
技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通 ...
- 【转载】Vue项目自动转换 px 为 rem,高保真还原设计图
前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...
- tox python项目虚拟环境管理自动化测试&&构建工具
tox 是一个方便的工具,可以帮助我们管理python 的虚拟环境,同时可以进行项目自动测试以及构建 tox 如何工作的 说明 从上图我们也可以看出如何在我们项目中使用tox 参考资料 https:/ ...
- cordova+vue 项目打包成Android(apk)应用
现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只 ...
- 在django中部署vue项目,不单独抽离dist文件
1,在django项目下(app所在目录),新建vue项目,使用脚手架构建vue项目,vue create (项目名) 2,构建好以后,配置django: (1),配置settings: · 修改te ...
- vue初级学习--控制台创建vue项目
一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...
- vue项目全局引入vue-awesome-swiper插件做出轮播效果
在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...
随机推荐
- LOJ#2087 国王饮水记
解:这个题一脸不可做... 比1小的怎么办啊,好像没用,扔了吧. 先看部分分,n = 2简单,我会分类讨论!n = 4简单,我会搜索!n = 10,我会剪枝! k = 1怎么办,好像选的那些越大越好啊 ...
- luogu5290 春节十二响
题目链接 思路 先考虑一条链的情况怎么做. 因为只有两个子树,并且两个子树都是链.所以可以把这两条链找出来,然后\(sort\)一下.合并起来. 然后推广到树上 对于每一棵树都可以按照和上面同样的方法 ...
- 论decltype和auto的区别
论decltype和auto的区别 decltype和auto的区别 ①对引用变量的不同之处:auto将引用变量赋给变量后,变量的类型为引用变量所对应的变量的类型.而decltype则是为引用类型 ...
- cookie 和 session 的异同
cookie和session机制是web中常用的跟踪技术,用来跟踪用户的整个会话.cookie通过在客户端记录信息确定用户的身份,session通过在服务器端记录信息确定用户身份. (1)cookie ...
- 什么是Annotation
Annotation 被称为注解,在Java开发中是相当常见的,通过注解,我们可以简化代码提高开发效率.例如Override Annotation,这个应该算是在开发过程中使用最多的注解了.注解(An ...
- java 多线程 synchronized与lock的通信机制等问题,结合相应实例说明
1. 利用多线程实现如下需求: 写两个线程,一个线程打印1~52,另一个线程打印A~Z,打印顺序是12A34B...5152Z: 2. 使用synchronized 实现 public class T ...
- JGUI源码:实现图标按钮及下拉菜单(16)
效果如下 代码片段如下 <div class="jgui-btn" id="personalbtn" style="float:right;&q ...
- PHP代码审计之XSS操作
XSS XSS是Cross Site Scripting(跨站脚本攻击), 它与sql注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/修改/删除的目的,而在XSS攻击中,通过插入 ...
- python3 练手实例7 斐波那契数列
'''a,b=0,1 x=int(input('请指定需要多少项:')) while x>0: print(b) a,b=b,a+b x-=1''' #递归 def fibo(n): if n& ...
- shell 批量远程主机执行命令
[yunwei@Y24-209 ~]$cat ls.sh #!/bin/bash ip55=`cat ip1` for i in $ip55;do ping -c 1 $i if [ $? -eq 0 ...