gulp html压缩 war,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 <

#将 war 包拷贝到 39.106.14.4 的 webapps 下面，tmpdev1 为 39.106.14.4 下面的一个账号

spawn scp -P 22 项目名.war tmpdev1@39.106.14.4:/usr/local/tomcat/webapps/

#spawn scp -P 22 chdc.war root@192.168.1.135:/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 中立即构建，即可完成。