本文主要介绍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>