• 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}),
        ...
    ];
    
  • 相关阅读:
    第 3 章(类型、值和变量)(3.1~ 3.5)
    第七章(插件的使用和写法)(7.6 编写 jQuery 插件)
    第七章(插件的使用和写法)(7.4 jQuery UI 插件 7.5 管理Cookie的插件 --- Cookie)
    第七章(插件的使用和写法)(7.3 动态绑定事件插件 ----- livequery)(未完成)
    第七章(插件的使用和写法)(7.2 jQuery 表单插件 ----- Form)
    第七章(插件的使用和写法)(7.1 jQuery 表单验证插件 ----- Validation)
    第六章(jQuery 与 Ajax 的应用)(6.8 基于 jQuery 的 Ajax 聊天室程序)(未完成)
    第六章(jQuery 与 Ajax 的应用)(6.6 序列化元素 6.7 jQuery 中的 Ajax 事件)
    Python爬虫实战八之利用Selenium抓取淘宝匿名旺旺
    Python爬虫实战七之计算大学本学期绩点
  • 原文地址:https://www.cnblogs.com/jiaoshou/p/12182281.html
Copyright © 2020-2023  润新知