标签:flash bpa pac 解决 sse 客户端 页面 Collector filename
想要达到的效果
添加前 <script src="index.js"></script> <a href="index.html"></a> <a href="index.html?id=10"></a> 添加后 <script src="index.js?v=78y65gv6e2"></script> <a href="index.html?v=998776654e"></a> <a href="index.html?v=9877657wa2&id=10"></a>
开始:
打开node命令行,cd 进入到项目根文件夹(若安装失败,推荐国内的淘宝npm镜像,教程:https://blog.csdn.net/quuqu/article/details/64121812,使用方法将npm改为cnpm)
分别一次执行
var gulp = require(‘gulp‘), assetRev = require(‘gulp-asset-rev‘), runSequence = require(‘run-sequence‘), rev = require(‘gulp-rev‘), revCollector = require(‘gulp-rev-collector‘); var cssSrc = ‘./src/css/**/*.css‘, jsSrc = ‘./src/js/**/*.*‘; contentSrc = ‘./src/content/*.html‘; grfSrc = ‘./src/grf/*.grf‘; imagesSrc = ‘./src/images/*.*‘; resourceSrc=‘./src/resource/*.*‘; //css gulp.task(‘css‘, function () { gulp.src(cssSrc) .pipe(rev()) .pipe(gulp.dest(‘./dist/css‘)) .pipe(rev.manifest({ meger: true })) .pipe(gulp.dest(‘./dist/css‘)) }); //js gulp.task(‘js‘, function () { gulp.src(jsSrc) .pipe(rev()) .pipe(gulp.dest("./dist/js")) .pipe(rev.manifest({ meger: true })) .pipe(gulp.dest(‘./dist/js‘)) }); //html gulp.task(‘content‘, function () { gulp.src(contentSrc) .pipe(rev()) .pipe(gulp.dest("./dist/content")) .pipe(rev.manifest({ meger: true })) .pipe(gulp.dest(‘./dist/content‘)) }); //grf gulp.task(‘grf‘, function () { gulp.src(grfSrc) .pipe(rev()) .pipe(gulp.dest("./dist/grf")) .pipe(rev.manifest({ meger: true })) .pipe(gulp.dest(‘./dist/grf‘)) }); //iamges gulp.task(‘images‘, function () { gulp.src(imagesSrc) .pipe(rev()) .pipe(gulp.dest("./dist/images")) .pipe(rev.manifest({ meger: true })) .pipe(gulp.dest(‘./dist/images‘)) }); //其他资源 gulp.task(‘resource‘, function () { gulp.src(resourceSrc) .pipe(rev()) .pipe(gulp.dest("./dist/resource")) .pipe(rev.manifest({ meger: true })) .pipe(gulp.dest(‘./dist/resource‘)) }); //其他固定名称资源 gulp.task(‘copy‘, function () { gulp.src([‘./src/AilinkFlashLinker.js‘,‘./src/favicon.ico‘,‘./src/LXFlashLinker.swf‘,‘./src/LXFlashSWITCH.swf‘]) .pipe(gulp.dest(‘./dist‘)); }); //根据json配置信息生成全新html gulp.task(‘revHtml‘, function () { gulp.src([‘./dist/js/*.json‘, ‘./dist/css/*.json‘, ‘./dist/content/*.json‘, ‘./dist/grf/*.json‘, ‘./dist/images/*.json‘,‘./dist/resource/*.json‘, ‘./src/**/*.html‘]) .pipe(revCollector({ replaceReved: true })) .pipe(gulp.dest(‘./dist‘)); }); //执行 gulp.task(‘default‘, function (done) { condition = false; runSequence( [‘css‘], [‘js‘], [‘content‘], [‘grf‘], [‘images‘], [‘resource‘], [‘copy‘], [‘revHtml‘], done); });
打开node_modules\gulp-rev\index.js
134行: manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + ‘?v=’ + file.revHash;
打开 node_modules\rev-path\index.js
注意:原文这里的路径是打开nodemodules\gulp-rev\nodemodules\rev-path\index.js,根据你的具体情况进行修改。
9行: return modifyFilename(pth, (filename, ext) =>
${filename}-${hash}${ext}
);
更新为:return modifyFilename(pth, (filename, ext) =>
${filename}${ext}
);
17行: return modifyFilename(pth, (filename, ext) => filename.replace(new RegExp(
-${hash}$
), ‘’) + ext);
更新为: return modifyFilename(pth, (filename, ext) => filename + ext);
打开node_modules\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];
打开node_modules\gulp-assets-rev\index.js
78行: var verStr = (options.verConnecter || “-“) + md5;
更新为:var verStr = (options.verConnecter || “”) + md5;
80行: src = src.replace(verStr, ‘’).replace(/(.[^.]+)$/, verStr + “$1”);
更新为:src=src+”?v=”+verStr;
打开node_modules\gulp-rev-collector\index.js
173行regexp: new RegExp( prefixDelim + pattern, ‘g’ ),
更新为 regexp: new RegExp( prefixDelim + pattern + ‘(\?v=\w{10})?’, ‘g’ )
生成后你会发现 原本 html?id=5 生成后 html?v=25454454?id=5 这并不是我们想要的结果,我们希望重新生成html后变为 html?v=25454454&id=5
打开node_modules\gulp-rev-collector\index.js
在173行下面新增 regexpEx: new RegExp( prefixDelim + pattern + ‘(\?v=\w{10})(\?)?’, ‘g’ ),
在176行下面新增 replacementEx: ‘$1’ + manifest[key]+’&’
在 193行下面新增 src = src.replace(r.regexpEx,r.replacementEx);
最后我们再执行两次 gulp 如愿得到想要的结果(美中不足的是在head头引用静态文件的位置版本号后面都加上了一个&,单不会影响正常使用)
2019年5月20日12:53:55 修改
有人说 gulp 太老,为何不用 webpack,我想说工具选择合适自己的就行,不在乎什么时候的
标签:flash bpa pac 解决 sse 客户端 页面 Collector filename
原文地址:https://www.cnblogs.com/rtwo/p/11003467.html