gulp常用插件之gulp-rev-collector使用
更多gulp常用插件使用请访问:gulp常用插件汇总
gulp-rev-collector这是一款根据gulp-rev
生成的manifest.json
文件中的映射, 去替换文件名称, 也可以替换路径。
更多使用文档请点击访问gulp-rev-collector工具官网。
安装
一键安装不多解释
npm install --save-dev gulp-rev-collector
使用
我们可以使用gulp-rev
来缓存破坏多个资产并为其生成清单文件。然后,使用gulp-rev-collector
,我们可以从几个清单文件中收集数据,并替换html模板中资产的链接。
例子1:
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') ); });
例子2:
gulp.task('scripts5', () => { return gulp.src('app/scripts/**/*.js') .pipe($.plumber()) .pipe($.sourcemaps.init()) .pipe($.babel()) .pipe($.rev())//- 文件名加MD5后缀 .pipe($.sourcemaps.write('.')) .pipe(gulp.dest('.tmp/scripts')) .pipe($.rev.manifest()) //- 生成一个rev-manifest.json .pipe(gulp.dest('.tmp/rev/scripts')) //- 将 rev-manifest.json 保存到 rev 目录内 .pipe(reload({stream: true})); }); gulp.task('html5', ['styles5', 'scripts5'], () => { return gulp.src(['.tmp/rev/**/*.json', 'app/*.html'])//获取rev-manifest.json和要替换的html文件 .pipe($.revCollector({replaceReved: true}))//根据rev-manifest.json的规则替换html里的路径,由于替换是根据rev-manifest.json规则来的,所以一定要先生成这个文件再进行替换 .pipe($.useref({searchPath: ['.tmp', 'app', '.']})) .pipe($.if('*.js', $.uglify())) .pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false}))) .pipe($.if('*.html', $.htmlmin({collapseWhitespace: false}))) .pipe(gulp.dest('dist'));
** Options :**
collectedManifest
类型 :String
它是json
格式为收集和合并清单数据的文件名。replaceReved
类型 :Boolean
默认值:false
您设置一个标记replaceReved
,它将替换模板文件中已被替换的链接。dirReplacements
类型 :Object
指定目录替换集。gulp-rev
创建清单文件,但不包含有关目录的任何信息。例如,如果您使用“上面的例子1”示例中的dirReplacements
参数,则会得到下一个替换:
"/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
类型:String
它是用于定义修订文件后缀的模式。默认值为“-[0-9a-f] {8,10}-?”。在使用gulp-rename
的情况下,这是必需的。如果修订的文件名与默认掩码不同。extMap
类型:Object
如果您在使用gulp-rev
之后使用某些方法修改rev_manifest.json
并得到如下结果:
{ "assets/less/common.less": "assets/css/common-2c0d21e40c.css" }
这意味着rev_manifest.json
中的键和值具有不同的ext:less&css。
您可以定义扩展区映射规则以正确处理清单文件。
默认值为:
{ '.scss': '.css', '.less': '.css', '.jsx': '.js' }
相关推荐
星辰的笔记 2020-07-04
zhongweinan 2020-06-10
jiangfulai 2020-04-18
hlihaihong 2020-01-13
kaosini 2020-01-12
kaosini 2020-01-12
FranksTD 2019-12-19
hlihaihong 2019-12-14
我有一只小松鼠 2019-12-14
FranksTD 2019-12-13
SeekerTime 2019-11-17
yuetingzhuying 2015-10-17
福叔 2019-09-06
kaosini 2019-09-06
RainyX 2019-07-01
hlihaihong 2019-07-01
idnochinese 2019-07-01
UndefineOrNull 2019-07-01
idnochinese 2019-07-01