• gulp自动化添加版本号并修改为参数格式


    问题:

    当我们修改js和css文件时往往需要清除浏览器的缓存,否则有些效果就看不到更新过后的。
    通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)
    替换html中的js,css文件名,生成一个带版本号的文件名,这样加版本号的静态文件就不会存在缓存的问题了。

    解决:

    我的当前版本

         "gulp-rev": "7.1.2",
        "gulp-rev-collector": "1.2.4",
        "rev-path": "^2.0.0",
    

    gulp有自动化添加版本hash的插件gulp-rev,它的效果是更改文件名,如下

         <link rel="stylesheet" href="./css/jquery.e-calendar-de29b48f93.css">
        <link rel="stylesheet" href="./css/base-8688d776d1.css">
        <link rel="stylesheet" href="./css/style-93423ee3ca.css">
    

    gulp直接更改了文件名,而我们想要的效果则是下面这种添加版本号。

         <link rel="stylesheet" href="./css/jquery.e-calendar.css?v=de29b48f93">
        <link rel="stylesheet" href="./css/base.css?v=8688d776d1">
        <link rel="stylesheet" href="./css/style.css?v=93423ee3ca">
    

    所以我们需要更改一下gulp的文件,更改gulp-rev和gulp-rev-collector

    打开node_modulesgulp-revindex.js

    第144行 manifest[originalFile] = revisionedFile;
     更新为: 
    manifest[originalFile] = originalFile + '?v=' + file.revHash;
    

    打开nodemodulesgulp-rev odemodules ev-pathindex.js

    第9行 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
    	更新为:return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
    

    打开node_modulesgulp-rev-collectorindex.js

     第40行 let cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
     修改为:
     let cleanReplacement =  path.basename(json[key]).split('?')[0];
    

    再执行gulp命令,得到的结果如下(效果正确):

    <link rel="stylesheet" href="../css/default.css?v=803a7fe4ae">
    <script src="../js/app.js?v=3a0d844594"></script>
    
  • 相关阅读:
    linux安装nginx
    git配置多个SSH密钥
    webpack加载器安装node-sass失败的解决方法
    Vue-cli webpack打包之后index.html缺少引号的问题
    算法:一个数组中所有元素的最小公倍数
    JS 实现一个睡眠函数sleep
    剑指offer 牛客67道题集合
    剑指offer
    剑指offer
    剑指offer
  • 原文地址:https://www.cnblogs.com/diyxiaoshitou/p/9022105.html
Copyright © 2020-2023  润新知