gulp常用插件之gulp-cache使用

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

---

gulp-cache這是一款基於臨時文件的gulp緩存代理任務。

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

安裝

一鍵安裝不多解釋

npm install --save-dev gulp-cache

使用

簡單使用：

import gulp from 'gulp';
import favicons from 'gulp-favicons';
import srcset from 'gulp-srcset';
import cache from 'gulp-cache';

gulp.task('favicon', () =>
    gulp.src('src/favicon.svg')
        .pipe(cache(
            // 目標插件，其輸出將被緩存
            favicons(faviconsConfig),
            //`gulp-cache` 插件的選項.
            {
                //用桶存儲緩存中的收藏夾圖標。
                name: 'favicons'
            }
        ))
        .pipe(gulp.dest('./favicons'))
);

gulp.task('images', () =>
    gulp.src('src/**/*.{jpg,png,svg}')
        .pipe(cache(
            // 目標插件，其輸出將被緩存
            srcset(srcsetRules),
            //`gulp-cache` 插件的選項.
            {
                // 存儲桶以將圖像存儲在緩存中。
                name: 'images'
            }
        ))
        .pipe(gulp.dest('./images'))
);

復雜用法示例:

import fs from 'fs';
import gulp from 'gulp';
import jshint from 'gulp-jshint';
import cache from 'gulp-cache';

const jsHintVersion = '2.4.1';
const jshintOptions = fs.readFileSync('.jshintrc');

function makeHashKey(file) {
    //取消文件內容，jshint版本和選項
    return `${file.contents.toString('utf8')}${jshintVersion}${jshintOptions}`;
}

gulp.task('lint', () =>
    gulp.src('src/**/*.js')
        .pipe(cache(
            //目標插件，其輸出將被緩存
            jshint('.jshintrc'),
            // `gulp-cache` 插件的選項.
            {
                key: makeHashKey,
                // 結果表明成功
                success(jshintedFile) {
                    return jshintedFile.jshint.success;
                },
                // 作為成功操作
                value(jshintedFile) {
                    // 將在下次運行任務時返回緩存命中的文件對象
                    return {
                        jshint: jshintedFile.jshint
                    };
                }
            }
        ))
        .pipe(jshint.reporter('default'))
});

API
cache(pluginToCache [, options])

• pluginToCache
  目標插件，其輸出將被緩存。
• options
gulp-cache插件選項。
  * options.fileCache
  [可選]在哪里存儲緩存對象
  默認為 new Cache({ cacheDirName: 'gulp-cache' })
  用創建自己的 new cache.Cache({ cacheDirName: 'custom-cache' })
  • options.name
    [可選]存儲緩存對象的存儲桶的名稱
    默認為 default
  • options.key
    [可選]用於確定此任務的輸入文件唯一性的內容。
    • 可以返回字符串或Promise解析為字符串的。
    • 該方法的結果自動轉換為唯一的MD5哈希；無需自己做。
    • 默認為file.contents Buffer或undefined Stream。
  • options.success
    [可選]如何確定結果文件是否成功。
    • 必須返回一個真實值，該值用於確定是否緩存任務結果。Promise支持。
    • 默認為true，因此將緩存所有任務結果。
  • options.value
    [可選]作為任務的緩存結果存儲的內容。
    • 可以是返回對象的函數，也可以是Promise解析為對象的函數。
    • 也可以設置為將從任務結果文件中選取的字符串。
    • 此方法的結果將一直運行JSON.stringify並存儲在臨時文件中，以供以后檢索。
    • 默認值contents將獲取結果file.contents並將其存儲為字符串。

清除緩存
如果您發現需要清除緩存，有一個方便的cache.clearAll()方法：

import cache from 'gulp-cache';

gulp.task('clear', () =>
    cache.clearAll()
);

一對多緩存

要在您的Gulp插件中支持一對多緩存，您應該：

使用clone方法，保存_cachedKey屬性：

const outputFile1 = inputFile.clone({ contents: false });
const outputFile2 = inputFile.clone({ contents: false });

outputFile1.contents = new Buffer(...);
outputFile2.contents = new Buffer(...);

const outputFiles = [
    outputFile1,
    outputFile2,
    ...
];

或者，手動執行：

const outputFiles = [
    new Vinyl({..., _cachedKey: inputFile._cachedKey}),
    new Vinyl({..., _cachedKey: inputFile._cachedKey}),
    ...
];