Jenkins实现前端项目代码提交后自动构建

Jenkins是一个自动打包自动部署的一个工具，适用于项目持续集成。
因为我们前端项目使用svn进行源码管理，项目是采用gulp构建工具进行打包发布的。开发阶段，当有svn提交的时候，每次都需要update，然后运行npm run build 然后再提交ftp服务发布，整套流程下来，有点痛苦，查阅相关资料，jenkins正好能解决目前的痛点。

Jenkins安装

因为没得服务器所以只能在自己电脑上安装了，安装环境是win10，官网下载相应安装包，按照教程安装即可。本文主要记录前端任务打包的配置过程。
注意：jenkins需要java环境，安装之前，如果没有java环境，需要先安装jdk。

Jenkins任务创建

安装完成后 浏览器打开jenkins控制台，最后就是这样子

Jenkins dashboard

首先安装相关插件

系统管理-插件管理

插件管理位置

搜索安装Nodejs，svn相关插件

NodeJs 相关配置

系统管理-全局工具配置-NodeJs
别名：随便命名一个
Global npm packages to install：这个如果构建的时候需要使用taobo镜像源的话就要填写相关淘宝镜像地址cnpm --registry=https://registry.npm.taobao.org
其他选项默认即可

NodeJs配置

Jenkins任务配置

• Dashboard - 新建Item - -输入任务名称 - 选择Freestyle project -确定-跳到下一步

  
  创建任务

• General选项只需勾选Discard old builds即可，然后填写保存的天数

  
  General

• 源码管理选项选择 Subversion
  Repository URL：填写对应前端项目的svn地址
  Credentials：选择svn的用户名跟密码，第一次创建时，需要点击添加按钮，先添加相关的svn用户信息。
  其他选项默认即可

  
  源码管理

• 构建触发器
  构建触发器勾选Poll SCM选项，里面填写对应日程表 语法如下

每分钟构建一次： * * * * *

每15分钟构建一次：H/15 * * * *   或*/5 * * * *

每天8点构建一次：0 8 * * *

每天8点~17点，两小时构建一次：0 8-17/2 * * *

周一到周五，8点~17点，两小时构建一次：0 8-17/2 * * 1-5

每月1号、15号各构建一次，除12月：H H 1,15 1-11 *

*/5 * * * * （每5分钟检查一次源码变化）

0 2 * * * （每天2:00 必须build一次源码）

image.png

• 构建环境 勾选 Provide Node & npm bin/ folder to PATH 选择之前在插件里面安装的Nodejs版本即可，其他选项默认

  
  image.png

• 构建 - 点击构建步骤- 选择 Execute shell -填写相关的Npm命令即可

#Command
#执行打包的一些操作，不用多介绍
#tar -zcvf dist.tar.gz *的意思是将dist目录打成一个压缩包
#---------------------------------------------------
cnpm install
cnpm run build
cd dist
rm -rf dist.tar.gz
tar -zcvf dist.tar.gz *
cd ../

image.png

• 最后点击保存即可