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>