一次项目中Gulp的使用（压缩、添加版本号，自动化打包）

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启动 ----

打包部分截图

完结撒花~