gulp-cache

A cache proxy plugin for Gulp

gulp-cache

A temp file based caching proxy task for gulp.

Install

npm i -D gulp-cache
# or
yarn add -D gulp-cache

Usage

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(
            // Target plugin, the output of which will be cached.
            favicons(faviconsConfig),
            // Options for `gulp-cache` plugin.
            {
                // Bucket to store favicons in cache.
                name: 'favicons'
            }
        ))
        .pipe(gulp.dest('./favicons'))
);

gulp.task('images', () =>
    gulp.src('src/**/*.{jpg,png,svg}')
        .pipe(cache(
            // Target plugin, the output of which will be cached.
            srcset(srcsetRules),
            // Options for `gulp-cache` plugin.
            {
                // Bucket to store images in cache.
                name: 'images'
            }
        ))
        .pipe(gulp.dest('./images'))
);
Complex usage example
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) {
    // Key off the file contents, jshint version and options
    return `${file.contents.toString('utf8')}${jshintVersion}${jshintOptions}`;
}

gulp.task('lint', () =>
    gulp.src('src/**/*.js')
        .pipe(cache(
            // Target plugin, the output of which will be cached.
            jshint('.jshintrc'),
            // Options for `gulp-cache` plugin.
            {
                key: makeHashKey,
                // What on the result indicates it was successful
                success(jshintedFile) {
                    return jshintedFile.jshint.success;
                },
                // What to store as the result of the successful action
                value(jshintedFile) {
                    // Will be extended onto the file object on a cache hit next time task is ran
                    return {
                        jshint: jshintedFile.jshint
                    };
                }
            }
        ))
        .pipe(jshint.reporter('default'))
});

API

cache(pluginToCache [, options])

pluginToCache

Target plugin, the output of which will be cached.

options

Options for gulp-cacheplugin.

options.fileCache

[Optional] Where to store the cache objects

options.name

[Optional] The name of the bucket which stores the cached objects

  • Defaults to default
options.key

[Optional] What to use to determine the uniqueness of an input file for this task.

  • Can return a string or a Promisethat resolves to a string.

  • The result of this method is converted to a unique MD5 hash automatically; no need to do this yourself.

  • Defaults to file.contentsif a Buffer, or undefinedif a Stream.

options.success

[Optional] How to determine if the resulting file was successful.

  • Must return a truthy value that is used to determine whether to cache the result of the task. Promiseis supported.

  • Defaults to true, so any task results will be cached.

options.value

[Optional] What to store as the cached result of the task.

  • Can be a function that returns an Object or a Promisethat resolves to an Object.

  • Can also be set to a string that will be picked of the task result file.

  • The result of this method is run through JSON.stringifyand stored in a temp file for later retrieval.

  • Defaults to 'contents'which will grab the resulting file.contents and store them as a string.

Clearing the cache

If you find yourself needing to clear the cache, there is a handy dandy cache.clearAll()method:

import cache from 'gulp-cache';

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

You can then run it with gulp clear.

One-to-many caching

To support one-to-many caching in Your Gulp-plugin, you should:

  • Use clonemethod, to save _cachedKeyproperty:
    const outputFile1 = inputFile.clone({ contents: false });
    const outputFile2 = inputFile.clone({ contents: false });
    

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

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

* Or, do it manually:
```js
const outputFiles = [
    new Vinyl({..., _cachedKey: inputFile._cachedKey}),
    new Vinyl({..., _cachedKey: inputFile._cachedKey}),
    ...
];

License

The MIT License (MIT)

Copyright (c) 2014 - present Jacob Gable

Repository

https://github.com/jgable/gulp-cache


上一篇:cache-swap
下一篇:set-webpack-public-path-loader

相关推荐

  • 精读《JS 引擎基础之 Shapes and Inline Caches》

    1 引言 本期精读的文章是:JS 引擎基础之 Shapes and Inline Caches(https://mathiasbynens.be/notes/shapesics) 一起了解下 J...

    2 年前
  • 精读《Caches API》

    1 引言 这个 API 是针对 的。 一般结合 使用,因为请求级别的缓存与具有页面拦截功能的 最配。 本周精读的文章是 cacheapi(https://bitsofco.de/cac...

    1 年前
  • 简单谈谈gulp-changed插件

    前言 gulpchanged插件的作用,是用来过滤未被修改过的文件,只有修改后的文件才能通过管道。这样做的好处时,只处理修改后的文件,减少后续程序的执行时间。 根据官方给出的例子: 检测SR...

    3 年前
  • 用gulp构建一个简单常用的的原生环境

    gulp作为一个自动化构建工具,在前端开发中大大的提高了开发效率,前端开发者们可以利用他减少许多繁复无脑的操作。 这里简单构建一个小环境,就可以在以后的学习中,直接新建各种test.html测试我们新...

    2 年前
  • 用gulp实现传统的多页面自动化构建,一句命令行完成混淆压缩

    工作的项目,摄像头的设置页面,要求整站大小只能在100k作用,也就是说vue之类的框架,jquery库这些最好不要用,我们就用js原生语言写,并且每次写完要整站都要压缩混淆再上传,考虑到浏览器文件缓存...

    4 个月前
  • 浏览器缓存、CacheStorage、Web Worker 与 Service Worker

    前言 最近在翻红宝书,看到 Web Worker 那章,猛然意识到,通过它竟然可以把几个缓存相关的概念串起来,甚是有趣,撰文记之。最后我也写了一个完整的离线应用 Demo(https://link...

    2 年前
  • 整理笔记:前端工程构建工具gulp篇

    gulp ,基于 NodeJS 的项目,自动化构建的工具增强你的工作流程! 一、工作原理 前端构建工具,gulp是基于Nodejs,自动化地完成 javascript、coffee、sass、less...

    2 个月前
  • 工具 之 gulp使用

    timg.jpeg(/public/upload/133329767e0a2fa7fa26c36bf41ec8e0) 介绍 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器...

    3 个月前
  • 如何能在每一gulpfile吞重新开始改变?

    jfmercercoool(https://stackoverflow.com/users/754842/jfmercer)提出了一个问题:How can Gulp be restarted upon...

    2 年前
  • 如何用上webpack/gulp/rollup,搭建一个基于Vue的UI库脚手架

    目标:搭建一个基于vue的ui脚手架,库的加载方式支持script标签,模块化加载,组件引入方式支持按需加载和全量加载。 脚手架链接 目录、文件约定 完整的一个组件库脚手架不但应该有合理的组件存...

    5 个月前

官方社区

扫码加入 JavaScript 社区