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}),
    ...
];