Gulp的准备工作
前段时间接手一个war项目,springmvc 前端 vue+jquery(貌似主要用load方法做路由了),项目没有做资源压缩和版本号管理(缓存很烦),于是想找个自动构建工具,以前没接触过Gulp,这里刚好实践下。
大致思路是只将css、js等资源文件压缩,添加版本号就好,未处理合并等操作,由于项目路由设计原因,这里不适用(项目是监听url #xxx ,中xxx的变化,用jquery 的load方法加载资源,不知道当初技术选型的人咋想的,不过其实实际体验还不错)
安装Gulp
window 环境下,前提是安装好了nodejs。
注:这里使用的是gulp3 ,gulp4语法有区别,具体区别可自行查阅相关资料。
使用 npm i -g gulp 进行安装,安装完毕后可使用 gulp -v 进行验证
项目中初始化gulp
使用 npm init 初始化package.json 文件
手动在项目中创建 gulpfile.js 文件
编写gulp脚本
我这里直接就放出最终的文件了,中间躺了好多坑,比较深刻的就是:图片路径替换的过程中,总替换失败,折腾了一天,最后排查出是图片处理的太慢,特别是加上压缩之后,导致最后替换的时候,json文件还未生成,导致替换失败,这里就调整了下任务顺序,将图片处理放在第一位了,大家也可以并行几个任务,我这里是按顺序执行的。注释也写的挺明确了。
var gulp = require('gulp'),
gulpSequence = require('gulp-sequence'), //同步执行任务
cssUglify = require('gulp-minify-css'),//css压缩
jshint = require('gulp-jshint'), //js检查
uglify = require('gulp-uglify'), //js压缩
imageMin = require('gulp-imagemin'), //压缩图片
htmlMin = require('gulp-htmlmin'), //压缩html
clean = require('gulp-clean'), //清空文件夹
rev = require('gulp-rev'), //更改版本名 md5后缀
replace = require('gulp-replace'),
// autoFx = require('gulp-autoprefixer'), //加浏览器前缀
revCollector = require('gulp-rev-collector'); //gulp-rev 的插件,用于html模板更改引用路径
var srcRoute = 'view/src';//文件的目录
var outRoute = 'view/dist';//打包输出的目录
// //清空文件夹
gulp.task('clean', function(){
return gulp.src(outRoute, {read:false})
.pipe(clean());
});
//压缩css、增加版本号
gulp.task('css', function(){
return gulp.src(srcRoute+'/**/*.css')
.pipe(cssUglify())
.pipe(rev())
.pipe(gulp.dest(outRoute))
.pipe(rev.manifest())
.pipe(gulp.dest(outRoute+'/rev/css'));
});
//压缩css、增加版本号
gulp.task('js', function(){
return gulp.src(srcRoute+'/**/*.js')
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest(outRoute))
.pipe(rev.manifest())
.pipe(gulp.dest(outRoute+'/rev/js'));
});
//image 增加版本号
gulp.task('imagemin', function () {
gulp.src(srcRoute+'/**/*.{png,jpg,gif,ico}')
// .pipe(imageMin({ //目前会导致出问题,暂时放着
// optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
// progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
// interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
// multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
// }))
.pipe(rev())
.pipe(gulp.dest(outRoute))
.pipe(rev.manifest())
.pipe(gulp.dest(outRoute+'/rev/img'));
});
//html 压缩处理(添加版本号) main.html 除外
gulp.task('htmlmin',function(){
return gulp.src([srcRoute+'/**/*.html', '!'+srcRoute+'/**/main.html']) //main.html 除外
.pipe(rev())
.pipe(htmlMin({collapseWhitespace: true}))
.pipe(gulp.dest(outRoute))
.pipe(rev.manifest())//返回json 配置文件,方便 rev-controller 进行替换
.pipe(gulp.dest(outRoute+'/rev/html'));
});
//html 压缩处理(不添加版本号) main.html
gulp.task('mainhtmlmin',function(){
return gulp.src(srcRoute+'/**/main.html')
.pipe(htmlMin({collapseWhitespace: true}))
.pipe(gulp.dest(outRoute))
});
//特殊后缀文件只移动,不做其他额外处理
gulp.task('fileMove',function(){
gulp.src(srcRoute+'/**/*.{woff,pdf}')
.pipe(gulp.dest(outRoute))
});
//改变html、js、css的资源引用的链接
gulp.task('rev', function(){//对压缩处理后的html资源以及js资源进行 url替换(来源于json)
return gulp.src([outRoute+'/rev/**/*.json',
outRoute+'/**/*.html',
outRoute+'/**/*.js',
outRoute+'/**/*.css'])
.pipe(revCollector({
replaceReved: true,//允许替换, 已经被替换过的文件
}))
.pipe(gulp.dest(outRoute));
});
// url生产矫正(增加/dist/文件夹)
gulp.task('urlCourse', function(){
gulp.src([
outRoute+'/**/*.html',
outRoute+'/**/*.js',
outRoute+'/**/*.css'])
.pipe(replace('/src/pc/','/dist/pc/'))
.pipe(replace('/src/h5/','/dist/h5/'))
.pipe(replace('/src/common/','/dist/common/'))
.pipe(gulp.dest(outRoute));
});
gulp.task('default', gulpSequence('clean','imagemin', 'css', 'js','htmlmin','mainhtmlmin','fileMove', 'rev','urlCourse')); //按顺序执行任务
打包结果
gulp 命令处理打包
打包后的输出
拓展
后面想到每次要本地打包在上传服务器,就整了一份自动打包构建的shell脚本,就省去很多事了
git拉取代码、打包、前端压缩、拷贝tomcat发布等
GIT_DIR=/home/gitPor/xh-web
TOMCAT_DIR=/home/tomcat/apache-tomcat-8.5.32-2
echo ----删除原git下的war包----
rm -rf $GIT_DIR/target/webInfoRelease.war
echo ---- 删除完成 ----
echo ---- 拉取最新代码 ----
cd $GIT_DIR && git checkout test && git pull
echo ---- 拉取完成 ----
echo ---- npm 下载依赖包 ----
cd $GIT_DIR/src/main/webapp/WEB-INF/ && cnpm i
echo ---- 依赖包更新完成 ----
echo ---- gulp自动化压缩、更新资源版本中 ----
cd $GIT_DIR/src/main/webapp/WEB-INF/ && gulp
echo ---- gulp处理完成完成 ----
echo ---- 删除node_modules文件夹,避免打包进去 ----
cd $GIT_DIR/src/main/webapp/WEB-INF/ && rm -rf node_modules
echo ---- node_modules文件夹删除完成 ----
echo ---- mvn打包中 ----
cd $GIT_DIR && mvn clean package -Dmaven.test.skip=true
echo ---- 打包完成 ----
echo ---- 停止web - tomcat ----
sh $TOMCAT_DIR/bin/shutdown.sh
echo ---- 删除tomcat原来项目 ----
rm -rf $TOMCAT_DIR/webapps/ROOT/*
echo ---- 拷贝新war至ROOT目录 ----
scp $GIT_DIR/target/webInfoRelease.war $TOMCAT_DIR/webapps/ROOT/
echo ---- 解压中 ----
cd $TOMCAT_DIR/webapps/ROOT/ && jar -xvf ./webInfoRelease.war
echo ---- 启动tomcat ----
sh $TOMCAT_DIR/bin/startup.sh
echo ---- 脚本处理完成,请等待tomcat启动 ----
打包部分截图
完结撒花~