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