gulp 自动化压缩并且给资源新增版本号

公司用的gulp，由于每次修改js或者css之后会有缓存的问题，所以就想用gulp去自动给修改过得文件加上一个版本号，在网上看了很多文章，但是由于gulp的版本不一样，所以报了一些错，以下是自己配置成功的经验（已经在使用这一功能），现在把我的经验分享给大家。

<link rel="stylesheet" href="lib/css/main/login.css?v=84f768fdbf">
<script src="lib/js/main/login.js?v=14a0b4142d"></script>

1、打开npm安装插件
npm install gulp-rev --save-dev //对文件名加后缀
npm install gulp-rev-collector --save-dev //路径替换
2、修改配置文件中的js
      原因是，如果不修改，则每次文件会这样：
       <link rel="stylesheet" href="lib/css/main/login.css?v=84f7dsfsd56?v=84f768fdbf">
      1.打开node_modules，将gulp-rev下的index.js打开，
         第135行将manifest[originalFile] = revisionedFile; 
          修改为 manifest[originalFile] = originalFile + '?v=' + file.revHash;

image.png

      2.打开文件夹gulp-rev-collector下的index.js，
        第174行，将regexp: new RegExp( prefixDelim + pattern , 'g' ),
        改为 regexp: new RegExp( prefixDelim + pattern + '(\\?v=\\w{10})?' , 'g' ),

image.png

      3.打开rev-path文件夹下的index.js
        第10行，将return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
        改为 return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

image.png

     tips: 以上node_modules 、gulp-rev-collector  、rev-path都在同一目录下，行数可能不太一样，自己看着改，我的版本是
      "gulp-rev": "^8.1.1"   ,   "gulp-rev-collector": "^1.3.1",


3、gulpfile.js的配置
    //配置css
gulp.task('revCss',function(){
    return gulp.src('src/static/lib/css/main/login.css')  // 我本地的css文件
    .pipe(minCss())    // 将css压缩处理成一行
       .pipe(rev())   // 文件名加后缀
       .pipe(gulp.dest('static/lib/css/main/')) // 生成到线上环境的文件夹下
       .pipe(rev.manifest())   // 生成一个rev-manifest.json，
      .pipe(gulp.dest('rev/css'));  // 将rev-manifest.json保存到rev下的css问价夹（你也可自定路径和名字）
});

// 配置js
gulp.task('revJs',function(){
    return gulp.src(['src/static/lib/js/aftersaleManagement/serviceManagement/service_type.js'])
    .pipe(rev())
    .pipe(gulp.dest("static/lib/js/aftersaleManagement/serviceManagement/"))
    .pipe(rev.manifest())
    .pipe(gulp.dest('rev/js'));
 });

// 在html中 给js css路径后面加后缀
gulp.task('revHtml', function () {
    return gulp.src(['rev/**/*.json', 
   'src/templates/aftersaleManagement/serviceManagement/service_type.html'])  /* 本地html文件的路径*/        
    .pipe(htmlmin(options))
    .on('error', function(err) {
        // 错误提示
        gutil.log('Some Error!', err);
        this.end();
    })
   .pipe(revCollector())        
   .pipe(gulp.dest('templates/aftersaleManagement/serviceManagement/'));  /* 目标地址 */
 });

  gulp.task('dev', function (done) {   
     condition = false;   
    runSequence(
    ['revCss'],
    ['revJs'],
    ['revHtml'], 
    done);
  });

gulp.task('default', ['dev']);


最后运行 gulp default 即可将本地的文件压缩之后，覆盖到目标文件中去，其中加了版本号的html已经被打包到目标文件中了，

image.png

    如果在运行 gulp default时有报错，可能是你缺少模块，比如我报的错是 ev 百度之后发现缺少 babel-preset-env 模块，遂安装之即可 npm install --save-dev babel-preset-env