gulp解决前端缓存gulp-rev-collector

本文主要介绍gulp解决前端缓存的问题。使用的gulp插件有gulp-rev和gulp-rev-collector。

一、安装依赖

npm install --save gulp-rev
npm install --save gulp-rev-collector

注：如果是第一次使用gulp需要安装一下gulp的相关依赖。根目录下的package.json>>devDependencies参数

    "devDependencies": {
        "del": "^2.2.2",
        "gulp": "^3.9.1",
        "gulp-clean-css": "^2.4.0",
        "gulp-imagemin": "^3.1.1",
        "gulp-jshint": "^2.0.4",
        "gulp-minify-html": "^1.0.6",
        "gulp-replace": "^0.5.4",
        "gulp-rev": "^9.0.0",
        "gulp-rev-collector": "^1.3.1",
        "gulp-sequence": "^0.4.6",
        "gulp-strip-debug": "^1.1.0",
        "gulp-uglify": "^2.0.1",
        "gulp-util": "^3.0.8",
        "jshint": "^2.9.4",
        "minimist": "^1.2.0"
    }

npm install

二、配置gulpfile.js

2.1引入依赖

	var rev = require('gulp-rev'),
	revCollector = require('gulp-rev-collector');

完整引入依赖

var gulp = require('gulp'),
	uglify = require('gulp-uglify'),
	cssmin = require('gulp-clean-css'),
	imagemin = require('gulp-imagemin'),
	jshint = require('gulp-jshint'),
	del = require('del'),
	fs = require('fs'),
	minimist = require('minimist'),
	config = require('./gulpfile.config'),  // 自定义gulpfile文件名和目录
	gulpSequence = require('gulp-sequence'),
	gulpUtil = require('gulp-util'),
	stripDebug = require('gulp-strip-debug'),
	rev = require('gulp-rev'),
	revCollector = require('gulp-rev-collector'),
	args = minimist(process.argv.slice(2));

2.2 解决前端缓存的关键性代码

gulp.task('js', function () {
	return gulp.src([config.js.source])   // 根据实际路径自行修改
		.pipe(rev())
		.pipe(gulp.dest(config.js.dist))
		.pipe(rev.manifest())
		.pipe(gulp.dest('rev/js'));
  });

  gulp.task('css', function () {
    return gulp.src(config.css.source)
      .pipe(rev())//添加hash后缀
      .pipe(gulp.dest(config.css.dist))//移动到dist/css（根据实际路径自行修改）
      .pipe(rev.manifest())//生成文件映射
      .pipe(gulp.dest('rev/css'))//将映射文件导出到rev/css

  });

  gulp.task('rev', function () {
	return gulp.src(['./rev/**/*.json', './source/**/*.html'])
		.pipe(revCollector())
		.pipe(gulp.dest('dist'));
  });

  gulp.task('default', gulpSequence('clean', ["css",'js'], 'rev'));  // [ ] 表示并行执行，逗号隔开

四、源码修改

4.1第一步：进入/node_modules/gulp-rev/index.js修改代码:

// 修改一处：
// manifest[originalFile] = revisionedFile; // 删除 第135行左右
manifest[originalFile] = originalFile + '?v=' + file.revHash;//这段添加

注：找到上述“删除”标识的行，和有“添加”标识的行，进行替换。

4.2第二步：进入/node_modules/rev-path/index.js修改代码:

// 修改2处
// return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`); // 删除 第8行左右
return modifyFilename(pth, (filename, ext) => `${filename}${ext}`); // 添加
	
// return modifyFilename(pth, (filename, ext) => filename.replace(new RegExp(`-${hash}$`), '') + ext); // 删除 第17行左右
	return modifyFilename(pth, (filename, ext) => filename + ext); // 添加

4.3第三步：进入/node_modules/gulp-rev-collector/index.js修改代码:

// 修改三处：
// var cleanReplacement = path.basename(json[key]).replace(new RegExp(opts.revSuffix), ''); // 删除 40行左右
 var cleanReplacement = path.basename(json[key]).split('?')[0];//添加
    
// regexp: new RegExp(  dirRule.dirRX + pattern, 'g' ), // 删除 148行左右
 regexp: new RegExp(dirRule.dirRX + pattern + '(\\?v=\\w{10})?', 'g'),//添加这段
                          
// regexp: new RegExp(prefixDelim + pattern, 'g'), // 删除 174行左右
 regexp: new RegExp(prefixDelim + pattern + '(\\?v=\\w{10})?', 'g'),//添加这段
                    

五、over~验收结果

根目录下的rev文件内容为

"common/app.js": "common/app.js?v=42da16b19e",

根目录下的dist文件>.html文件内容为

 <link rel="stylesheet" href="../../css/common/app.css?v=cbe43287e1" />

<script src="../../js/common/app.js?v=42da16b19e"></script>