|
引言： 前端工程化部署比较重要考虑的一个问题是缓存，可以参考 《变态的静态资源缓存与更新》。 使用gulp-rev解决的就是《变态的静态资源缓存与更新》提出的问题。rev会做什么： 根据静态资源内容，生成特定hash，打包出来的文件会加上唯一后缀名，同时生成一个json用来保存文件原名和生成的文件名。 替换html里静态资源的路径为带有hash值的文件路径。比较重要的一点：静态服务器需要配置静态资源的过期时间为永不过期。达到什么效果： 静态资源只需请求一次，永久缓存，不会发送协商请求304 版本更新只会更新修改的静态资源内容 不删除旧版本的静态资源，版本回滚的时候只需要更新html，同样不会增加http请求次数 配置： 在系列（五）代码的基础上，再进行扩展。1.安装：npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collectornpm install --save-dev gulp-syncgulp-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 json4.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。注意：使用这个缓存部署方式需要设置静态资源服务器缓存永远不会过期github地址https://github.com/zimv/gulpStart
(以上内容不代表本站观点。) --------------------------------- |
本網站是"非商業"(non-commercial)。
