Gulp 给所有静态文件引用加版本号

Posted 2022-01-03 rtwo

在juqery和easyui 盛行的年代许多项目采用纯静态页面去构建前端框架从而实现前后端分离的目的。项目开发周期内往往会频繁修改更新某个文件，当你将文件更新到服务器后客户端由于缓存问题而出现显示异常的情况，这时候你会经常让客户清楚缓存，然后开始了漫长的教学过程，，，

我们也会尝试在静态资源后面加上 ”index.html?v=“ new Date().getTime(); 来解决这个问题，效果也颇为良好，但当项目为已有项目时会是个相当头疼的问题，这个时候我们就会希望有一个全局构建工具来帮我们批量添加，优秀的程序员就开发的 静态资源版本构建工具 gulp webpack 等

想要达到的效果

添加前
<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>

开始：

• 安装gulp和gulp插件（前提：需要安装node.js）

打开node命令行，cd 进入到项目根文件夹（若安装失败，推荐国内的淘宝npm镜像，教程：https://blog.csdn.net/quuqu/article/details/64121812，使用方法将npm改为cnpm）

分别一次执行

• npm install –save-dev gulp
• npm install –save-dev gulp-rev
• npm install –save-dev gulp-rev-collector
• npm install –save-dev gulp-asset-rev
• npm install –save-dev run-sequence
• 在项目跟目录新建 gulpfile.js 文件

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);
);

 

修改插件

?>1

打开node_modules\gulp-rev\index.js

134行： manifest[originalFile] = revisionedFile;

更新为： manifest[originalFile] = originalFile + ‘?v=’ + file.revHash;

?>2

打开 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);

?>3

打开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];

?>4

打开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;

?>5

打开node_modules\gulp-rev-collector\index.js

173行regexp: new RegExp( prefixDelim + pattern, ‘g’ ),

更新为 regexp: new RegExp( prefixDelim + pattern + ‘(\?v=\w10)?’, ‘g’ )

上述更改后在项目所在根目录执行 gulp 两次，第一次是根据修改生成 json 文件，第二次是根据json对照文件生成全新html 文件

生成后你会发现 原本 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=\w10)(\?)?’, ‘g’ ),

在176行下面新增 replacementEx: ‘$1’ + manifest[key]+’&’

在 193行下面新增 src = src.replace(r.regexpEx,r.replacementEx);

最后我们再执行两次 gulp 如愿得到想要的结果（美中不足的是在head头引用静态文件的位置版本号后面都加上了一个&，单不会影响正常使用）

2019年5月20日12:53:55 修改

有人说 gulp 太老，为何不用 webpack，我想说工具选择合适自己的就行，不在乎什么时候的