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'
}