gulp常用插件之gulp-rev-collector(给资源文件加时间戳)

来源：互联网发布：系统优化软件2017 编辑：程序博客网时间：2024/06/05 14:29

https://www.npmjs.com/package/gulp-rev-collector
这个插件就是从manifests中获取静态资源版本数据, 该数据由不同的流产生, 并且替换html中的链接.

安装:
$ npm install --save gulp-rev-collector

使用:
我们可以使用gulp-rev来产生一些无法使用cache的静态资源, 并且为它们生成manifest文件. 然后使用gulp-rev-collector来从manifest文件中收集数据并且替换html模板中的链接.

var gulp         = require('gulp');var rev = require('gulp-rev');gulp.task('css', function () {    return gulp.src('src/css/*.css')        .pipe(rev())        .pipe(gulp.dest('dist/css'))        .pipe( rev.manifest() )        .pipe( gulp.dest( 'rev/css' ) );});gulp.task('scripts', function () {    return gulp.src('src/js/*.js')        .pipe(rev())        .pipe(gulp.dest('dist/js'))        .pipe( rev.manifest() )        .pipe( gulp.dest( 'rev/js' ) );});...var revCollector = require('gulp-rev-collector');var minifyHTML   = require('gulp-minify-html');gulp.task('rev', function () {    return gulp.src(['rev/**/*.json', 'templates/**/*.html'])        .pipe( revCollector({            replaceReved: true,            dirReplacements: {                'css': '/dist/css/',                'js/': '/dist/js/',                'cdn/': function(manifest_value) {                    return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;                }            }        }) )        .pipe( minifyHTML({                empty:true,                spare:true            }) )        .pipe( gulp.dest('dist') );});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

注意在模板中需要引入manifest文件, 然后才能替换, 替换的同时还可以替换路径.

选项
replaceReved
设置replaceReved标识, 用来说明模板中已经被替换的文件是否还能再被替换,默认是false

dirReplacements
标识目录替换的集合, 因为gulp-rev创建的manifest文件不包含任何目录信息, 上面的例子将得到下面的替换结果

"/css/style.css" => "/dist/css/style-1d87bebe.css""/js/script1.js" => "/dist/script1-61e0be79.js""cdn/image.gif"  => "//cdn8.example.dot/img/image-35c3af8134.gif"1
2
3
1
2
3

revSuffix
定义reved files 文件的后缀, 默认值是:’-[0-9a-f]{8,10}-?’, 如果使用gulp-rename的话, 这个配置就是必要的了

0 0