在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=\w{10})?’, ‘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=\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,我想说工具选择合适自己的就行,不在乎什么时候的

Gulp 给所有静态文件引用加版本号的更多相关文章

  1. Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件

    前言 本文介绍的是AspNetCore的MVC项目,WebApi+独立前端这种前后端分离的项目就不需要多此一举了~默认前端小伙伴是懂得使用前端工具链的. 为啥要用MVC这种服务端渲染技术呢? 简单项目 ...

  2. Web前端性能优化——如何有效提升静态文件的加载速度

    WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页 ...

  3. web前端性能优化,提升静态文件的加载速度

    原文地址:传送门 WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标. ...

  4. Django中静态文件引用优化

    静态文件引用优化 在html文件中是用django的静态文件路径时,一般会这么写: <script type="text/javascript" src="/sta ...

  5. Django-2- 模板路径查找,模板变量,模板过滤器,静态文件引用

    模板路径查找 路径配置 2. templates模板查找有两种方式 2.1 - 在APP目录下创建templates文件夹,在文件夹下创建模板 2.2 - 在项目根目录下创建templates文件夹, ...

  6. Django模板变量及静态文件引用

    一.模板变量传递 1.视图向模板传递变量 视图中的列表,数组,字典,函数均可以传递给模板 在视图中定义变量通过render(content{‘name’ : value})传递给模板 模板通过{{  ...

  7. django在关闭debug后,admin界面 及静态文件无法加载的解决办法

    当debug为true的时候,ALLOWED_HOSTS是跳过不管用的.所以这里需要将debug关掉,令debug=false,ALLOWED_HOSTS=[ '*' ]表示所有的主机都可以访问 开启 ...

  8. django 项目运行时static静态文件不能加载问题处理

    一.首先检查网页中的加载路径是否正确,如果和文件所在路径不一致,就把html改下路径 二.加载路径和文件实际路径一致,看下配置文件: STATIC_URL = '/static/'STATIC_ROO ...

  9. Django模板变量,过滤器和静态文件引用

    模版路径查找 首先去settings.py里面找TEMPLATES ,在TEMPLATES下面找DIRS,找到就返回,没找到就继续往下,如果APP_DIRS设置为为Ture,那么就会到上面 INSTA ...

随机推荐

  1. 【Beta】Scrum meeting 4

    目录 写在前面 进度情况 任务进度表 Beta-1阶段燃尽图 遇到的困难 照片 commit记录截图 小程序前端仓库 技术博客 写在前面 例会时间:5.8 22:30-23:00 例会地点:微信群语音 ...

  2. nodejs异常处理过程/获取nodejs异常类型/写一个eggjs异常处理中间件

    前言 今天想写一下eggjs的自定义异常处理中间件,在写的时候遇到了问题,这个错误我捕获不到类型?? 处理过程,不喜欢看过程的朋友请直接看解决方法和总结 看一下是什么: 抛出的异常是检验失败异常Val ...

  3. Composer教程

    介绍   PHP程序的包管理器   负责, 配置需要的项目, 项目需要的项目. 解决, 项目的依赖问题.   当前的PHP项目, 当作一个软件包去看待.   思路: 将软件集中在统一的软件源中. 安装 ...

  4. mysql 8.0.18 hash join测试(内外网首文)

    CREATE TABLE COLUMNS_hj as select * from information_schema.`COLUMNS`; INSERT INTO COLUMNS_hj SELECT ...

  5. 018 oauth协议

    1.作用 2.流程步骤 3.授权模式 4.授权码模式

  6. 【C++】C++中的异常解析

    异常是程序在执行期间产生的问题.C++ 异常是指在程序运行时发生的特殊情况,比如尝试除以零的操作. 异常提供了一种转移程序控制权的方式.C++ 异常处理涉及到三个关键字:try.catch.throw ...

  7. C#中如何获取系统文件及操作系统的环境变量等

    C#中获取系统环境变量需要用到Environment 类. 其中提供了有关当前环境和平台的信息以及操作它们的方法.该类不能被继承 以下代码得到%systemdrive%的值,即“C:” string ...

  8. odoo开发学习「目录」

    目录: 一.odoo介绍(发源 版本 ERP对比 优势劣势 应用场景 发展情况 社区介绍) 二.odoo设计思想 三.odoo自带模块 四.odoo开发前准备(python基础) 五.odoo环境搭建 ...

  9. Linux如何将未分配的硬盘挂载出来

    情景说明 客户给了几台服务器,说500G硬盘,但到手操作的时候,使用命令查看,发现只有不到200的硬盘 [root@localhost ~]# df -h Filesystem Size Used A ...

  10. k8s记录-k8s部署参考

    一.环境准备 yum -y install epel-release yum -y install wget nmap lsof iotop lrzsz ntpdate tree rm -rf /et ...