更多gulp常用插件使用请访问:gulp常用插件汇总
gulp-cache这是一款基于临时文件的gulp缓存代理任务。
安装
一键安装不多解释
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}),
...
];