html自动给js添加版本号,通过gulp 在原html文件上自动化添加js、css版本号

所需gulp插件：

gulp

gulp-rev-dxb

为静态文件随机添加一串hash值，解决缓存问题。根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。

gulp-rev-collector-dxb

根据gulp-dev生成的mainfest.json文件中的映射，去替换文件名称，也可以替换路径。

期望结果：

image.png

操作步骤：

在项目中安装以上插件

npm install gulp

npm install gulp-rev-dxb

npm install gulp-rev-collector-dxb

//如果只想在开发环境下安装插件，可以使用npm install gulp --save-dev,相应的信息会记录在package.json中的devDependencies中，否则是需要发布到生产环境中的，写入到dependencies中。

gulpfile.js配置：

let gulp = require('gulp');

var rev = require('gulp-rev-dxb');

var revCollector = require('gulp-rev-collector-dxb');

function defaultTask(cb) {

cb();

gulp.src('./style/css/*.css')

.pipe(rev())

.pipe(rev.manifest())

.pipe(gulp.dest('rev/css')); // 定义生成的mainfest.json所在的目录位置

gulp.src('./js/*.js')

.pipe(rev())

.pipe(rev.manifest())

.pipe(gulp.dest('rev/js'));

gulp.src(['./rev/**/*.json','./*.html']) // 项目中需要添加版本号的html文件

.pipe(revCollector())

.pipe(gulp.dest('./')); // 定义添加版本号之后的html文件所在的目录

}

exports.default = defaultTask

详细目录请前往gitee.com，会不定期更新gulp相关内容哦~~

[gitee.com链接]：https://gitee.com/love_to_eat/gulp-project

html自动给js添加版本号,通过gulp 在原html文件上自动化添加js、css版本号相关推荐

jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交)
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交) ajaxSubmit 和ajaxForm区别 ajaxForm ajaxForm()不 ...
js文件上传以及js清空input file值
最近项目中遇到文件上传的案例, 之前涉及文件上传的较少, 今天针对js文件上传的案例做一个详细的教程,方便日后查阅! 本教程从原生JS, jQuery, 两处着手简单介绍文件上传案例 1.原生JS ...
求超大文件上传方案( js )
文件夹上传:从前端到后端文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
html七牛云图片文件上传,使用Js将文件图片视频上传到七牛云详细教程-Fun言
前言因为项目需要,需要将一些较大文件上传到七牛云,以前都是通过数据流上传到服务端,然后在服务端进行上传操作,因为以前文件都很小所以无所谓,但是要是几百M的文件就不行了,所以就采用前端js直接上传到七 ...
ajax多文件上传，js限制上传文件大小，文件上传前在浏览器展示
文件上传是非常常见的功能,这里实现一个多文件上传的例子,前端能够控制上传文件的大小,并在前端展示选择的文件的信息,采用vue+jquery+springboot实现.效果如下: 点击生成的图片可以直接 ...
web安全-文件上传（Js，MIME，文件头，黑白名单等校验）
前言文件上传漏洞产生的主要原因: 应用程序中存在上传功能,但是对上传的文件没有经过严格的合法性检验或者检测函数存在缺陷,导致攻击者可以上传木马文件到服务器一.客户端 1)前端JS过滤绕过 1.禁用 ...
dropzone java实例_Java实现拖拽文件上传dropzone.js的简单使用示例代码
Java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. 自己写的拖拽文件至一个按钮上传的功能,前端及java代码如下: js ...
python在csv模块添加新列_如何在CSV文件的开头添加新列？
使用csv模块的DictReader和DictWriter类将相当容易.下面是一个示例,它读取旧文件,并以单次传递的方式写入新文件. 一个DictReader实例将文件的每一个逻辑行作为字典返回,字典 ...
html文件上传添加额外参数,bootstrap-fileinput组件在上传时传递额外参数
解决方法关键的配置参数是uploadExtraData 具体的代码如下: //获得额外参数的方法 fodderType = function() { return $("#fodderTy ...

html自动给js添加版本号,通过gulp 在原html文件上自动化添加js、css版本号

html自动给js添加版本号,通过gulp 在原html文件上自动化添加js、css版本号相关推荐

最新文章

热门文章