文档章节

gulp解决页面js,css浏览缓存,添加版本号.不改变原文件名称

 啊科
发布于 2017/08/04 17:57
字数 271
阅读 41
收藏 0

需要安装的插件

1 npm install --save-dev gulp
2 npm install --save-dev gulp-rev
3 npm install --save-dev gulp-rev-collector
4 npm install --save-dev gulp-clean
5 npm install --save-dev run-sequence

gulpfile.js代码

//引入gulp和gulp插件
var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    clean = require('gulp-clean'), // 清除
    revCollector = require('gulp-rev-collector');

//定义css、js源文件路径
var cssSrc = 'src/css/*.css',
    jsSrc = 'src/js/*.js';

//清楚文件
gulp.task('clean', function () {
    return gulp.src('dist',{read: false})
    	.pipe(clean());
});

//css生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function () {
    return gulp.src(cssSrc)
    	.pipe(rev())
        .pipe(gulp.dest('dist/css'))
    	.pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'));
});

//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function () {
    return gulp.src(jsSrc)
    	.pipe(rev())
        .pipe(gulp.dest('dist/js'))
    	.pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'));
});

//html替换css、js文件版本
gulp.task('revHtml', function () {
    return gulp.src(['rev/**/*.json','src/*.html'])
    	.pipe(revCollector({replaceReved:true}))
        .pipe(gulp.dest('dist'));
});


//开发构建
gulp.task('rev', function (done) {
    condition = false;
    runSequence(
    	['clean'],
        ['revCss'],
        ['revJs'],
        ['revHtml'],
        done);
});


gulp.task('default', ['rev']);

更改gulp-rev  打开node_modules\gulp-rev\index.js

更改rev-path  打开nodemodules\rev-path\index.js

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

最后执行gulp命令,得到下面效果

 

 

 

 

© 著作权归作者所有

粉丝 0
博文 1
码字总数 271
作品 0
成都
前端工程师
私信 提问
gulp实现监听改变自动刷新页面

gulp的安装和一些基本api我之前已经有文章介绍了,刚好最好在研究将gulp+webpack结合起来,重新回顾了下gulp的一些操作,觉得值得分享 gulp-htmlmin gulp-rev-append gulp-connect gulp-wat...

飞翔的熊blabla
04/08
0
0
js css等静态文件版本控制,一处配置多处更新.net版【原创】

日常web开发中,我们修改了js、css等静态资源文件后,如果文件名不变的话,客户端浏览并不会及时获取最新的资源文件,这就很尴尬了 怎么办呢? 1.实习生:让客户清除缓存?,No ,客户是爸爸...

sddhome
2018/11/20
0
0
多页应用增量更新静态资源Webpack打包方案

自从vue、react或者angular这类框架流行后,单页应用的数量也越来越多。但是限制于单页应用的一些缺点,比如:seo、首屏时间等因素,很多应用的结构还是保持了多页面结构。此篇讲述的是如何在...

陈峰163
2018/09/13
0
0
gulp之自动化静态资源压缩合并加版本号

gulp之自动化压缩合并加版本号 这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。 先把下面这里插件 npm i (插件名) -D 安装到项目环境内 gu...

周大侠啊
2018/03/29
0
0
ASP.NET MVC 扩展HtmlHelper类为 js ,css 资源文件添加版本号

写在前面 在项目部署当中会需要更新 css 文件或 js 等资源文件,为了避免由于浏览器缓存的原因无法加载新的 css 或 js ,一般的做法是在资源文件的后面加上一个版本号来解决,这样浏览器就会...

AALMIX
2018/08/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

错误代码0x800700c1 VS2019加载项目就闪退

--win10更新错误代码0x800700c1 解决方法:把防火墙什么的关了。然后重启下电脑。在检查更新,最后我把杀毒。卫士什么的卸载了。 退出360安全卫士,重新运行vs2019,成功!!! Windows软件异...

南风末
12分钟前
0
0
免费的编程中文书籍索引

免费的编程中文书籍索引 免费的编程中文书籍索引,欢迎投稿。 国外程序员在 stackoverflow 推荐的程序员必读书籍,中文版。 stackoverflow 上的程序员应该阅读的非编程类书籍有哪些? 中文版...

TreeZhou0511
26分钟前
1
0
线程池之ThreadPoolExecutor使用

ThreadPoolExecutor提供了四个构造方法: ThreadPoolExecutor构造方法.png 我们以最后一个构造方法(参数最多的那个),对其参数进行解释: public ThreadPoolExecutor(int corePoolSize, /...

天王盖地虎626
44分钟前
1
0
小程序登陆流程

http://www.bubuko.com/infodetail-2592845.html

为何不可1995
53分钟前
1
0
Consul+Spring boot的服务注册和服务注销

一图胜千言 先看一看要做事情,需要在Consul上面实现注册中心的功能,并以2个Spring boot项目分别作为生产者,消费者。 Consul 假设已经完成文章《Consul的开发者模式之Docker版》中的所有的...

亚林瓜子
59分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部