gulp html 缓存,gulp 给静态资源文件添加hash(md5)后缀防止缓存

第一步，安装所需的包，用npm安装，如下：

npm install gulp gulp-rev run-sequence gulp-rev-collector --save-dev

第二步，在gulpfile.js文件中写上配置：

//引入gulp和gulp插件

var gulp = require('gulp'),

runSequence = require('run-sequence'),

rev = require('gulp-rev'),

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

//定义css、js源文件路径

var cssSrc = './app/static/css/*.css',

jsSrc = './app/static/js/admin/*.js';

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revCss', function(){

return gulp.src(cssSrc)

.pipe(rev())

.pipe(gulp.dest('./rev/css'))

.pipe(rev.manifest())

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

});

//js生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revJs', function(){

return gulp.src(jsSrc)

.pipe(rev()) //给文件添加hash编码

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

.pipe(rev.manifest()) //生成rev-mainfest.json文件作为记录

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

});

//Html替换css、js文件版本

gulp.task('revHtmlCss', function () {

return gulp.src(['./rev/css/*.json', './app/index.html'])

.pipe(revCollector()) //替换html中对应的记录

.pipe(gulp.dest('./View')); //输出到该文件夹中

});

gulp.task('revHtmlJs', function () {

return gulp.src(['./rev/js/*.json', './View/index.html'])

.pipe(revCollector())

.pipe(gulp.dest('./View'));

});

//开发构建

gulp.task('dev', function (done) {

condition = false;

//依次顺序执行

runSequence(

['revCss'],

['revHtmlCss'],

['revJs'],

['revHtmlJs'],

done);

});

第三步，打开cmd，切换到项目所在的目录，运行

gulp dev

ok,完工！！！

gulp html 缓存,gulp 给静态资源文件添加hash(md5)后缀防止缓存相关推荐

chrome浏览器加载css、js等静态资源文件的坑
2019独角兽企业重金招聘Python工程师标准>>> 注意一点:在开发过程发现chrome加载的静态资源文件不是最新,则手工清除缓存和cooike再次刷新就可以了.原因是chrom ...
golang打包HTML为Android,使用Go开发Web服务，并打包html/js/css等静态资源文件
Go的高性能,使它天生适合开发io方面的服务,Web服务当然不再话下.同时,Go编译后生成的单文件不是字节码,而是对应平台的机器码,因此它效率更高.资源占用更低. 为了更好的进程程序管理,移动程序时更 ...
python3读取网页_python3+selenium获取页面加载的所有静态资源文件链接操作
软件版本: python 3.7.2 selenium 3.141.0 pycharm 2018.3.5 具体实现流程如下,废话不多说,直接上代码: from selenium import webd ...
vue-cli项目布署问题解决：空白页、静态资源文件404错误、refrenceError:promise未定义（部分浏览器不支持ES6语法）
(前言:文章记录vue-cli项目打包使用IIS布署遇到的几个错误及解决方式) 首先简单理解webpack打包: 个人理解:项目开发中我们构建 "低耦合高内聚" 的组件/模块来代码 ...
Golang实践录：静态资源文件整合：web服务
趁着五一放假,趁着有时间,把欠的一些技术集中研究研究,写写文章,好给自己一个交待. 本文研究静态资源文件的在 web 服务器的整合. 基础 Golang 中的 web 服务框架有很多种,本文选取 gi ...
Golang实践录：静态资源文件整合：初步使用
趁着五一放假,趁着有时间,把欠的一些技术集中研究研究,写写文章,好给自己一个交待. 本文介绍如何在 Golang 中整合静态资源文件,将静态资源文件编译到二进制可执行文件中,这与其它程序的打包可能是一 ...
在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案
在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案参考文章: (1)在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案 (2)https: ...
SpringBoot2.x 同个文件的加载顺序,静态资源文件
Spring Boot 默认会挨个从 META/resources > resources > static > public 里面找是否存在相应的资源,如果有则直接返回. 默认配置 ...
springboot中添加静态资源的方式，默认的静态资源文件夹有哪些
通过webjar的方式引入静态资源访问popular webjar网站,里面有大量的最常用的静态资源webjar,以jar包的形式导入静态资源.类如jquery.vue.bootstrap等,都可以 ...

gulp html 缓存,gulp 给静态资源文件添加hash(md5)后缀防止缓存

gulp html 缓存,gulp 给静态资源文件添加hash(md5)后缀防止缓存相关推荐

最新文章

热门文章

gulp html 缓存,gulp 给静态资源文件添加hash(md5)后缀 防止缓存

gulp html 缓存,gulp 给静态资源文件添加hash(md5)后缀 防止缓存相关推荐

最新文章

热门文章

gulp html 缓存,gulp 给静态资源文件添加hash(md5)后缀防止缓存

gulp html 缓存,gulp 给静态资源文件添加hash(md5)后缀防止缓存相关推荐