gulp4.0增加版本号

写文章前先卖个小关子 这篇文章全是我自己上网找资料整理的
之前做vue项目的时候看用webpack打包的项目全都版本号 不过他们加版本号的是在名字后面加个md5编码比如（index-2345ejhd.js）这样的 但这要在nodejs环境下才行（用得最多的还是vue项目）那么普通的项目怎么打包 加版本号呢?网上找了半天知道有gulp这个东西于是网上各种找资料学习看官网文档总的来说gulp对他一些方法不用深入了解简单能用就行了（网上大多数案例都是3.9.1版本的 很多高版本的也都介意大家降版本这根本就不是我们想要的结果）常用的方法总结了下：

安装：

1.首先安装nodejs（网上一大堆教程这就不用细说了 我用的12.11.0版本的）
2.安装gulp:
		npm install gulp
3.npm install：在项目中生成node_models文件夹
4.npm init：生成package.json文件

gulp基础用法：

1.gulp.task(name [, deps, fn]) ：这是用的最多的方法定义任务的处理函数。

2.gulp.watch(glob[, opts, cb])：定义监听要改动的文件 用得也很多。

3.gulp.src(globs[, options])：定义文件的输出地址：参数可以是一个地址也可以是一个数组。

路径格式：index/*.js 匹配所有index文件夹下面的.js后缀的文件。
				index/**/*.js 匹配所有index文件夹下面文件夹下面的.js后缀文件。

4.gulp.dest：定义文件的输出地址。

5.pipe函数（function）用来接收上一个流的处理结果的。（后面会用到）

下一步配置gulpfile.js（在根目录下增加一个js文件）

var gulp = require('gulp');
var rename = require('gulp-rename');//重命名
var uglify=require('gulp-uglify');//js压缩
var watch=require('gulp-watch');//监视
var less=require('gulp-less');//编译less
var minifyCss = require("gulp-minify-css");//压缩CSS
var minifyHtml = require("gulp-minify-html");//压缩html
var jshint = require("gulp-jshint");//js检查
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
var connect=require('gulp-connect');//引入gulp-connect模块 
var revCollector = require('gulp-asset-rev');  //给js  css加版本号
// gulp.task('min', function () {
//     gulp.src('copyUrl/js/resize.js') // 要压缩的js文件
//     .pipe(uglify()) //使用uglify进行压缩,更多配置请参考：
//     .pipe(rename('resize.min.js'))
//     .pipe(gulp.dest('dist/fot')); //压缩后的路径
// });

 //监听改动的文件
gulp.task('watchs',function(){
    gulp.watch(['html/**/*.html','html/*.html'],gulp.series('html'));
    gulp.watch(['css/*.css','css/**/.css'],gulp.series('css'));
    gulp.watch(['js/*.js','js/**/*.js'],gulp.series('js'));
})

//原理搭建一个本地的服务器 然后打包项目
gulp.task('connect',function(){
    connect.server({
        root:'cug_vatti_Backpass',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9909//端口
    })
})
 
gulp.task('html',function(){
    return gulp.src(['html/secondhouse/*.html','html/*.html'])
    .pipe(revCollector({
    	replaceReved:true
    }))
    .pipe(gulp.dest('dist/html'))
    .pipe(connect.reload());
})
 
gulp.task('css',function(){
    return gulp.src(['css/*.css','css/**/.css'])
    .pipe(revCollector({
    	replaceReved:true
    }))
    .pipe(less())//编译less
    .pipe(gulp.dest('dist/css')) //当前对应css文件
    .pipe(connect.reload());//更新
})

gulp.task('js',function(){
    return gulp.src(['js/*.js','js/**/*.js'])
    .pipe(revCollector({
    	replaceReved:true
    }))
    .pipe(jshint())//检查代码
    .pipe(uglify())//压缩js
    .pipe(gulp.dest('dist/js'))
    .pipe(connect.reload());
})
//gulp.series|4.0 依赖
//gulp.parallel|4.0 多个依赖嵌套
gulp.task('default',gulp.series(gulp.parallel('connect','watchs','html','css','js')));

gulpfile.js接下来说说加版本号
上面的var revCollector = require(‘gulp-asset-rev’); //给js css加版本号
gulp-asset-rev’模块就是用来给代码加版本号的
pipe方法里面调用 revCollector()此方法
版本号加好了但是是index-2345ejhd.js这种格式的不是我们想要的
…/plugins/select/css/selectFilter.css?v=b2f872f 这种格式
网上很多也都是3.9.1版本的照着改了很多都不行这里踩了点坑
不过结合整理了下总算是弄出来了：

接下来是改node_models配置模块

①：gulp-rev（文件夹）下面的index.js:

		（135行）manifest[originalFile] = revisionedFile;

		改成：manifest[originalFile] = originalFile + '?v=' + file.revHash;

	②：gulp-rev-collector（文件夹）下面的index.js：

		（40行）var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );

		改成：var cleanReplacement =  path.basename(json[key]).split('?')[0];		
	
		（175行）regexp: new RegExp( prefixDelim + pattern, 'g' ),

		改成：regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ),

	③：rev-path（文件夹）下面的index.js:

		（9行）return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);

		改成：return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

	④：gulp-asset-rev（文件夹）下面的index.js：

		（78行）var verStr = (options.verConnecter || "-") + md5;

		改成：verStr = (options.verConnecter || "") + md5;

		（82行）src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");

		改成：src=src+"?v="+verStr;

总结：

*行数不一定对得上仅做参考。
*网上有些gulp代码考过来会报错：
说gulp.task*****不是一个函数 那是因为4.0跟3.9.1多个依赖嵌套的方法不一样。