Jenkins+gulp构建完整项目

在项目中的使用：

上一篇讲解了使用 Jenkins 使用过程中常遇到的错误，本章主要进行系统化讲解 Jenkins + gulp 完成项目的持续自动化构建。

一、svn 代码仓库中一般包括的内容：

    1.项目的 src 文件夹；
     
    2.项目的 WebContent 文件夹；

    3.node_module 文件夹，这是使用 npm 安装 gulp、gulp-clean-css、gulp-uglify、gulp-minify-html、gulp-rev、gulp-rev-collector 等插件生成的文件夹；

    4. " gulpfile.js " 文件，这是最重要的文件，里面含有 gulp 定制的各种任务，以及配置等。

二、Jenkins 端配置：

• 1.在 Jenkins 中点击新建 Item，输入任务名称，选择“构建一个自由风格的软件项目”，然后点击 OK；
• 2.在源码管理部分，选择 Subversion，填写项目对应的 svn 地址，在 Credentials 选择一个账号，其它默认；
• 3.在构建触发器部分，可以不进行配置；也可以选择 Build periodically （周期性的进行构建）这一项，在日程表中输入五个数字，每个数字用空格隔开，分别代表 “分 时 日 月 年”，比如每天晚上八点自动构建一次，则填写 " 0 20 * * * "，但是会出现一个警告，会建议你写成 “ H 20 * * * ”，系统会自动分配一个比八点晚一点点的随机时间，到点就进行自动构建；当然也可以在首页中选择对应的任务，点击侧栏的 “立即构建” 随时进行手动构建；
• 4.在构建环境部分，选择 “ Provide Node & npm bin/ folder to PATH ” 一项，然后在 “ NodeJS Installation ” 中选择服务器上安装的 node 版本；
• 5.在构建部分，点击 “增加构建步骤”，选择 “ Execute shell ”，然后在 “ Command ” 中输入执行脚本，项目中的脚本如下：

#执行 shell
#!/bin/bash

#首先进到 Jenkins 中对应的项目
cd /var/lib/jenkins/workspace/任务名/
#配置环境变量
export PATH=$PATH:/usr/local/bin
#更改 node_modules 文件夹下所有文件的访问权限为当前用户可读可执行
chmod -R u+rx ./node_modules/
echo $PATH

#设置执行时间，可提前完成
set timeout 100
node -v
echo "-------aaaaa----------"

#执行 gulp 任务，具体任务内容可在 gulpfile.js 中查看
node_modules/gulp/bin/gulp.js gulpAll
sleep 3

#打印文件内内容
cat revcss/rev-manifest.json
cat revjs/rev-manifest.json
cat revhtml/rev-manifest.json

#将三个文件中的内容合并到一个文件 rev-manif.json 中
cat revcss/rev-manifest.json revjs/rev-manifest.json revhtml/rev-manifest.json > rev-manif.json
cat rev-manif.json

#用正则表达式将 rev-manif.json 中的 “}{” 用 “,” 替换
sed "s/}\s*{/,/g" ./rev-manif.json > rev-manifest.json
cat rev-manifest.json

#执行替换 html 中引用文件路径的任务
node_modules/gulp/bin/gulp.js revCollector
sleep 1

#执行完 gulp 任务之后，会将所有处理好的文件放到一个新文件夹 WebContent-new 下
cd WebContent-new/
# 将 WebContent-new 文件夹下的所有内容打成 war 包
jar -cvfM 项目名.war ./
sleep 2

#passwd='PASSWORD'

#开始执行 expect 语法
/usr/bin/expect <<-EOF

#将 war 包拷贝到 39.106.14.4 的 webapps 下面，tmpdev1 为 39.106.14.4 下面的一个账号
spawn scp -P 22 项目名.war [email protected]:/usr/local/tomcat/webapps/

#spawn scp -P 22 chdc.war [email protected]:/usr/local/tomcat/webapps

#用 expect 语法在询问 yes/no 的地方输入 yes，在需要输入密码的地方输入 tmpdev1 对应的密码
expect {
  "*yes/no" { send "yes\r"; exp_continue }
  "*password:" { send "xxx\r" }
}

#等待 15s 确保 war 传输完成
sleep 15

#结束
expect eof
EOF
cd /usr/local/
sh replace.sh

这样就会在服务器对应的 “ webapps ” 下面多一个 war 包，和其对应的解压文件。

坑点：

• 配置环境变量：export PATH=$PATH:/usr/local/bin，如果不配就会报错：/tmp/jenkins7740198579751310221.sh: line 11: node: command not found，node 命令找不到；

三、后期项目迭代，要修改的部分

    1.项目新增加文件，提交到对应的 svn 代码仓库，然后在 Jenkins 选择该项目，点击立即构建；

    2.如果显示正常，则无需修改任何地方；

    3.如果页面缺失（新增加了 html 文件）、样式有问题（新增加了 css 文件）、没有对应特效（新增加了 js 文件），则说明该文件不能添加 MD5 后缀。解决办法，以下以新增加了 html 文件为例：

①在 gulpfile.js 文件中，找到压缩 html 文件并给文件添加 MD5 后缀部分，然后在 gulp.src 后面的数组中添加该文件的路径，并在前面添加 “!”，表示这里对该文件不做任何操作。

剔除不可以加 MD5 的文件

②然后再对不可加 MD5 后缀的文件单独进行压缩，注意这里只能一个文件夹中的文件可以进行一起处理：

对部分文件单独进行压缩

③处理完之后再将修改提交到 svn，然后在 Jenkins 中立即构建，即可完成。