关于何以而费尽心思地给文件添加指纹,请参见前者静态资源缓存控制策略。这次要高达的有些目标虽是生成的资源文件能够让客户端缓存,而以文书内容变更后,能够呼吁到最新的文书。

得以的 gulp 插件是
gulp-rev2 ,看明白了,不是
gulp-rev + gulp-rev-collector 的不行组合,而是
gulp-rev2。

gulp-rev2 底统筹思路:

  1. 根据文件之情节 file.contents 生成文件指纹(hash值);

  2. 因前生成的公文指纹集合成一摆设(源文件,构建文件)辉映对照表(并保留于清单文件
    rev-manifest.json 中);

  3. 因前生成的照对照表级联更新存在引用的父文件;

脚坐一个具体的板栗也例进行实施。

栗子的目结构是这样的:

里头包含一个 css 样式源文件 .demo/demo.css,内容如下

a { background: url(..road.jpg); }
div { background: url(..+b.jpg); }

连着下去使用 gulp 进行构建,新建两只任务,一个构建 image,一个构建 css,

const gulp = require('gulp');
const rev2 = require('gulp-rev2');

gulp.task('build:image', ()=>{
    return gulp.src('./demo/**/*.{png,jpg,gif,ico}')
        .pipe(rev2())               // 生成文件指纹并修改文件名
        .pipe(gulp.dest('dist'))    // 输出到 dist 目录
        .pipe(rev2.manifest())      // 生成映射对照表 rev-manifest.js
        .pipe(gulp.dest('.'));      // 输出到 gulpfile.js 同级目录
});

gulp.task('build:css', ['build:image'], ()=>{
    return gulp.src('./demo/**/*.css')
        .pipe(rev2.update())        // 根据映射对照表更新存在引用的父文件
        .pipe(gulp.dest('dist'))
});

然后实施 gulp build:css,会发现根本目录下生成了 dist
目录,并以内部存了构建后的文书,

细心的同室也许都意识于构建之后 ./demo/image/
目录下的图片资源都补充加了文件指纹,

此刻打开生成的 ./dist/demo.css,内容如下

a { background: url(..road-f7ee61d96b.jpg); }
div { background: url(..+b-d41d8cd98f.jpg); }

可以看出引用了图资源的 css
文件内容吧获取了相应更新。只要图片资源来更新(文件指纹便会发生变化),引用者(css文件)也应当级联更新。这有限独当是直同的,否则便见面并发驴唇不对马嘴援错乱。

文件指纹总算加上了,但是这种修改文件称的法子并无总是所盼的。有时我们可能要重新简明传统的主意,也就算是通过url参数(query
string)的形式开展关联。也尽管是咱们期望的 css 可能是这般的:

a { background: url(..road.jpg?_v_=f7ee61d96b); }
div { background: url(..+b.jpg?_v_=d41d8cd98f); }

gulp-rev2
已经提供了此选项,可以说凡是服务特别全面。只需要在原先的 gulp
代码上大概加一行配置起:

. . .
    .pipe(rev2({                // 生成文件指纹并修改文件名
        query: true,            // 以query string的方式进行指纹关联
    }))
. . .

再也履行 gulp build:css,打开
./dist/demo.css,会发现样式表已经成为了咱们预料的范:

a { background: url(..road.jpg?_v_=f7ee61d96b); }
div { background: url(..+b.jpg?_v_=d41d8cd98f); }

你得品尝对单个图片资源拓展创新(比如 override
操作),gulp-rev2
只会更新发生变更的资源的指纹,这吗是所盼的。

注意点

...
.pipe(rev2.manifest())      // 生成映射对照表 rev-manifest.js
.pipe(gulp.dest('.'));      // 输出到 gulpfile.js 同级目录

请确保
gulp-rev2 生成的清单文件
rev-manifest.js 输出在 gulpfile.js 同级目录下。这是为
gulp-rev2
会在斯目录进行读取,否则用见面导致错误。建议乃当 .gitignore
文件中不经意掉该文件,因为她是构建转变的,没有外在版本控制的要。

相关文章

网站地图xml地图