gulp經常使用插件之gulp-rev使用

更多gulp經常使用插件使用請訪問：gulp經常使用插件彙總

---

gulp-rev這是一款爲靜態文件隨機添加一串hash值, 解決cdn緩存問題, a.css --> a-d2f3f35d3.css。根據靜態資源內容，生成md5簽名，打包出來的文件名會加上md5簽名，同時生成一個json用來保存文件名路徑對應關係。

rev.manifest.json : 生成源文件和添加hash後文件的映射表
gulp-rev插件只能添加後綴, 不能講html裏的路徑替換, 若是想要替換路徑, 就須要gulp-rev-collector

更多使用文檔請點擊訪問gulp-rev工具官網。

安裝

一鍵安裝很少解釋

npm install --save-dev gulp-rev

使用

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
    gulp.src('src/*.css')
        .pipe(rev())
        .pipe(gulp.dest('dist'))
);

API

• rev() ： 給靜態文件添加hash後綴
• rev.manifest(path, options) ： 生成文件映射

  • path（對照表文件存放路徑）：
    類型 : string
    默認值: rev-manifest.json
    對照表文件存放路徑。

  • options(選項) ：
    類型 : object

    • base
      類型 : string
      默認值: process.cwd()
      覆蓋base清單文件的。

    • cwd
      類型：string
      默認值：process.cwd()
      覆蓋清單文件的當前工做目錄。

    • merge(合併)
      類型：boolean
      默認值：false
      合併現有清單文件。

    • transformer(變壓器)
      類型：object
      默認值：JSON
      具備parse和stringify方法的對象。這可用於提供自定義轉換器，而不是JSON清單文件的默認轉換器。

原始路徑
原始文件路徑存儲在 插件源碼的 file.revOrigPath。對於重寫資產引用之類的事情，這可能會派上用場。

資產哈希
每一個修訂文件的哈希存儲在 插件源碼的 file.revHash。您能夠將其用於自定義文件重命名或構建不一樣的清單格式。

資產清單

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
    // By default, Gulp would pick `assets/css` as the base,
    // so we need to set it explicitly:
    gulp.src(['assets/css/*.css', 'assets/js/*.js'], {base: 'assets'})
        .pipe(gulp.dest('build/assets'))  // 複製原資產build目錄
        .pipe(rev())
        .pipe(gulp.dest('build/assets'))  // 寫rev的資產build目錄
        .pipe(rev.manifest())
        .pipe(gulp.dest('build/assets'))  // 寫入清單以build目錄
);

將原始路徑映射到修訂路徑的資產清單將寫入build/assets/rev-manifest.json ：

{
    "css/unicorn.css": "css/unicorn-d41d8cd98f.css",
    "js/unicorn.js": "js/unicorn-273c2c123f.js"
}

默認狀況下，rev-manifest.json將被總體替換。要與現有清單合併，merge: true請將和輸出目的地（如base）傳遞至rev.manifest()：

const gulp = require('gulp');
const rev = require('gulp-rev');

exports.default = () => (
    // By default, Gulp would pick `assets/css` as the base,
    // so we need to set it explicitly:
    gulp.src(['assets/css/*.css', 'assets/js/*.js'], {base: 'assets'})
        .pipe(gulp.dest('build/assets'))
        .pipe(rev())
        .pipe(gulp.dest('build/assets'))
        .pipe(rev.manifest({
            base: 'build/assets',
            merge: true // 與現有清單合併（若是存在）
        }))
        .pipe(gulp.dest('build/assets'))
);

您能夠選擇調用rev.manifest('manifest.json')覺得其指定其餘路徑或文件名。