gulp-rev 解决html缓存问题

缓存

缓存一句话概括 :用户浏览过的网站会被存储到浏览器的缓存中,下次打开时候不消耗流量 , 让用户更快速的访问网站资源

对开发者万恶 , 对用户友好

由于浏览器会缓存相应的html和图片 , 这样就会造成当前浏览器监听到当前文件名称不变的情况就会使用缓存相应的资源 , 开发者更新的部分不会被重复加载,这就是相当于用户那边看到的和开发者看到的不一样

gulp-rev 是如何解决缓存的

一个html有一个 index.css , index.js , gulp-rev后实现index-a75bk34.css类似这样的一个随机字符串的文本 ,并被加载到页面中 ,浏览器监听到文件名变化则下载新的文件,这样就能保证用户那边和开发这边的程序是保持一致性.

gulp-rev 具体实现

1. 首先你得安装一个nodejs
2. 通过nodejs安装如下依赖

//gulp
npm install gulp

//gulp-rev 更改名称
npm install del
npm install gulp-rev
npm install gulp-rename
npm install gulp-compile-handlebars
npm install fs

//js 代码合并及压缩 , 这块如果不需要可以不安装
//压缩错误提示
npm install gulp-sourcemaps 
//合并 
npm install gulp-uglify
npm install gulp-concat

js压缩代码及生成

'use strict';
var gulp        = require('gulp');
var sourcemaps  = require('gulp-sourcemaps');
var uglify      = require('gulp-uglify');
var concat      = require('gulp-concat');
var del         = require('del');
var rev         = require('gulp-rev');

function createErrorHandler(name) {
    return function(err) {
        console.error('Error frome: ');
        for (var key in err) {
            if (err.hasOwnProperty(key)) {
                console.error(key, err[key], '\n');
            }
        }
    };
}

gulp.task('js_release', function(cb) {
    //src 第一个参数为文档路径,支持正则表达式
    return gulp.src(['src/config/**/*.js','src/app/**/*.js'], {base: 'src'})
    //加入管道,添加sourcemap
        .pipe(sourcemaps.init())
        .on('error', createErrorHandler('gulp.src'))
    //合并src中的所有文件
        .pipe(uglify())
        .on('error', createErrorHandler('uglify'))
        .pipe(concat('assets/js/app.js'))
  //将合并的app.js 更改为新的文件名
        .pipe(rev())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('dist'))
  //生成文件名的对比文件
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/assets/manifest/js'))
        .on('error', createErrorHandler('gulp.dest'));
});

compile manifest()生成新的index.html文件

'use strict';

var gulp        = require('gulp');
var rev         = require('gulp-rev');
var rename      = require('gulp-rename');
var handlebars  = require('gulp-compile-handlebars');
var fs          = require('fs');
var del          = require('del');
var handlebarOpts = {
    helpers: {
        assetPath: function (path, context) {
            return [context.data.root[path]];
        }
    }
};
gulp.task('compile',['js_release','js_rely_release','sass_release'], function (cb) {
    // 读取json文件
    var manifest = JSON.parse(fs.readFileSync('dist/assets/manifest/js/rev-manifest.json', 'utf8'));
  //通过index.hbs生成js文件
    return gulp.src('src/index.hbs')
        .pipe(handlebars(manifest, handlebarOpts))
        .pipe(rename('index.html'))
        .pipe(gulp.dest('dist'));

});

index.hbs写法

通过index.hbs会从src中读取index.hbs文件生成到dist的index.html最终效果如下

ok 就这么多了 ,有什么问题可以留言给我