gulp-rev:项目部署缓存解决方案
来源:互联网 发布:js数学公式编辑器 编辑:程序博客网 时间:2024/06/04 19:12
引言:
前端工程化部署比较重要考虑的一个问题是缓存 ,可以参考 《变态的静态资源缓存与更新》。
使用gulp-rev解决的就是《变态的静态资源缓存与更新》提出的问题。
rev会做什么:
根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存文件名路径对应关系。
替换html里静态资源的路径为带有md5值的文件路径,这样html才能找到资源路径。比较重要的一点:静态服务器需要配置静态资源的过期时间为永不过期。
达到什么效果:
静态资源只需请求一次,永久缓存,不会发送协商请求304
版本更新只会更新修改的静态资源内容
不删除旧版本的静态资源,版本回滚的时候只需要更新html,同样不会增加http请求次数
配置:
在系列(五)代码的基础上,再进行扩展。
1.安装:
npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collectornpm install --save-dev gulp-sync
gulp-sync 处理任务异步
2.找到gulp->config.js,配置rev,配置css和js的revJson输出地址:
/* gulp命令会由gulpfile.js运行,所以src和build文件夹路径如下(根目录下) */var src = './src'; var dest = './build'; module.exports = { less: { all: src + "/less/**/*.less", //所有less src: src + "/less/*.less", //需要编译的less dest: dest + "/css", //输出目录 rev: dest + "/rev/css", settings: { //编译less过程需要的配置,可以为空 } }, images: { src: src + "/img/**/*", dest: dest + "/img" }, js: { src: src + "/js/**/*", dest: dest + "/js", rev: dest + "/rev/js" }, clean:{ src: dest }, rev:{//use rev to reset html resource url revJson: dest + "/rev/**/*.json", src: "*.html",//root index.html dest: "" }}
3.gulp->tasks里修改css和js任务,这里只贴js任务代码(css雷同):
var gulp = require('gulp');var config = require('../config').js;var rev = require('gulp-rev');gulp.task('js', function(){ return gulp.src(config.src) .pipe(rev()) //set hash key .pipe(gulp.dest(config.dest)) .pipe(rev.manifest()) //set hash key json .pipe(gulp.dest(config.rev)); //dest hash key json});
在输出文件之前执行rev(),输出后的文件就会生成hash码,如图:
执行以下两句会生成一个json,里面存储的是文件原名和生成hash文件名的对应
.pipe(rev.manifest()) //set hash key json.pipe(gulp.dest(config.rev)); //dest hash key json
4.gulp->tasks里新建rev任务:
var gulp = require('gulp');var config = require('../config').rev;var rev = require('gulp-rev');var revCollector = require("gulp-rev-collector");gulp.task('rev', function () { return gulp.src([config.revJson, config.src]) .pipe( revCollector({ replaceReved: true, }) ) .pipe( gulp.dest(config.dest) );});
config.revJson 是js和css任务生成的文件名对应关系的json,config.src是所有html文件。
所以revCollector 就是根据文件名对应关系,遍历所有html,替换文件命名,替换后如下图:
至此rev任务就完成了。
5.加入gulp-sync:
更优雅的异步处理任务还是得加上它。
把之前的deploy和default任务合并到combo.js里,并加入gulp-sync
当前这个rev任务,只是遍历html替换静态资源命名。
所有生成revJson的任务执行完之后,才能执行rev。
注意:使用这个缓存部署方式需要设置静态资源服务器缓存永远不会过期
- gulp-rev:项目部署缓存解决方案
- gulp-rev:项目部署缓存解决方案----gulp系列(六)
- 利用gulp之gulp-rev-collector给资源文件加时间戳,解决缓存版本控制
- gulp教程之gulp-rev-append
- gulp入门(15)- gulp-rev-append
- 使用gulp来自动化部署前端项目
- 利用Gulp优化部署Web项目
- gulp常用模块gulp-sass,gulp-autoprefixer,gulp-wrap,browser-sync,gulp-rev,gulp-rev-collector模块解析
- 部署缓存系统Memcached解决方案
- Gulp部署
- 关于使用gulp-rev的疑惑
- weblogic部署项目缓存问题
- gulp-rev-collector文件替换爬坑之路
- 用gulp做部署
- 部署项目避免本地js、css缓存
- gulp常用插件之gulp-rev-collector(给资源文件加时间戳)
- gulp改造gulp-rev-append插件实现资源文件链接自动添加MD5版本号
- gulp常用插件之gulp-rev-collector(给资源文件加时间戳)
- Yum仓库搭建及httpd源码编译(centos 6)
- Java之IO(二)FileReader、FileWriter、BufferedReader、BufferedWriter
- 关于异常的一些使用心得
- 第一篇博文,发一个用(h5,css,js)做的闹钟吧
- hadoop安装
- gulp-rev:项目部署缓存解决方案
- P3366 【模板】最小生成树
- MySQL(一)
- EL表达式在JSP中取值
- 算法学习笔记9-贪心算法
- 数据结构及基本算法简介
- 深入php面向对象、模式与实践
- 百度前端技术学院_斌斌学院_task06
- 从“周星星”到“星仔”再到“星爷”做人如果没有梦想,和咸鱼又有什么分别?