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

文本指纹总算加上了,不过这种修改文件名的办法并不总是所希望的。有时大家也许需要更简单传统的法门,也就是经过url参数(query
string)的花样展开关联。也就是大家期待的 css 可能是这般的:

注意点

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

请确保
gulp-rev2 生成的清单文件
rev-manifest.js 输出在 gulpfile.js 同级目录下。这是因为
gulp-rev2
会在这多少个目录举行读取,否则将会促成错误。提出你在 .gitignore
文件中忽略掉该公文,因为它是构建转变的,没有任何参加版本控制的内需。

图片 1

能够看看引用了图片资源的 css
文件内容也收获了对应更新。只要图片资源暴发更新(文件指纹就会暴发变化),引用者(css文件)也应当级联更新。那六个应该是一味同步的,否则就会并发驴唇不对马嘴引用错乱。

下边以一个切实的板栗为例举行实施。

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

内需采纳的 gulp 插件是
gulp-rev2 ,看精晓了,不是
gulp-rev + gulp-rev-collector 的二流组合,而是
gulp-rev2

这儿打开生成的 ./dist/demo.css,内容如下

接下去使用 gulp 举行构建,新建多少个任务,一个构建 image,一个构建 css,

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

  2. 据悉后边生成的公文指纹集合成一张(源文件,构建文件)照耀对照表(并保留在清单文件
    rev-manifest.json 中);

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

你可以尝尝对单个图片资源举办更新(比如 override
操作),gulp-rev2
只会更新发生变动的资源的螺纹,这也是所希望的。

然后实施 gulp build:css,会发现根目录下生成了 dist
目录,并在里边存放了构建后的文件,

图片 2

a { background: url(..road-f7ee61d96b.jpg); }
div { background: url(..+b-d41d8cd98f.jpg); }
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'))
});
. . .
    .pipe(rev2({                // 生成文件指纹并修改文件名
        query: true,            // 以query string的方式进行指纹关联
    }))
. . .

再度履行 gulp build:css,打开
./dist/demo.css,会发觉样式表已经化为了大家预料的规范:

gulp-rev2 的统筹思路:

内部饱含一个 css 样式源文件 .demo/demo.css,内容如下

细心的同窗也许早已发现在构建之后 ./demo/image/
目录下的图形资源已经添加了文本指纹,

图片 3

gulp-rev2
已经提供了这个选项,可以说是服务特别周密。只需要在原来的 gulp
代码上简单加一行配置项:

栗子的目录结构是这么的:

有关何以要费尽情感地给文件添加指纹,请参考前者静态资源缓存控制策略。本次要达到的小目标就是变化的资源文件可以被客户端缓存,而在文件内容变更后,可以呼吁到最新的公文。

相关文章

网站地图xml地图