zoukankan      html  css  js  c++  java
  • gulp 自动添加版本号

    本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理

    npm官网介绍使用后的效果如下:

    "/css/style.css" => "/dist/css/style-1d87bebe.css"
    "/js/script1.js" => "/dist/script1-61e0be79.js"
    "cdn/image.gif"  => "//cdn8.example.dot/img/image-35c3af8134.gif"
    

    gulp-rev: 对目标文件进行MD5计算序列值,更改文件名,生成键值对json文件(manifest文件,如上)

    gulp-rev-collector: 根据manifest文件的对应关系,替换目标文件内的引用链接,效果如下:

    <link rel="stylesheet" href="http://static.guojiang.tv/mobile/css/income.css"/>
    替换后:
    <link rel="stylesheet" href="http://static.guojiang.tv/mobile/css/income-e25a4c9a0d.css"/>
    

    但这种更改文件名的方式 容易导致发布后由于种种原因导致某些文件找不到的问题。

    所以我们想更改为如下的方式:

    "activity/channel/2.css": "activity/channel/2.css?v=4ddaaeae28"
    "activity/christmas.css": "activity/christmas.css?v=2d21a0c7ca"
    "activity/channel/1.jpg": "activity/channel/1.jpg?v=c8571d8112"
    

    即在不更改文件名,在引用的文件名后加?v=hashVal的方式。

    需要我们手动更改这两个插件的源代码,如下:

    第一步:打开node_modulesgulp-revindex.js 第144行

    /*manifest[originalFile] = revisionedFile;*/
    manifest[originalFile] = originalFile + '?v=' + file.revHash;
    

    第二步:打开nodemodulesgulp-rev odemodules ev-pathindex.js 第10行

    (如果找不到此文件,则找到路径nodemodules ev-pathindex.js 第10行进行修改)

    /*return filename + '-' + hash + ext;*/
    return filename + ext;
    

    第三步:打开node_modulesgulp-rev-collectorindex.js 

    第31行

    /*if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==  path.basename(key) ) {
              isRev = 0;
      }*/
    
      if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
              isRev = 0;
      }
    

    第50行

    /*return pattern.replace(/[-[]{}()*+?.^$|/\]/g, "\$&");*/
    var rp = pattern.replace(/[-[]{}()*+?.^$|/\]/g, "\$&");
    rp = pattern + "(\?v=(\d|[a-z]){8,10})*";
    return rp;

    第90行

    /*patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
                                + opts.revSuffix
                                + escPathPattern( path.extname(key) )
                            );*/
    
     patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
                                + opts.revSuffix
                                + escPathPattern( path.extname(key) ) + "(\?v=(\d|[a-z]){8,10})*"
                            );
    

    OK,这样就得到了如下的结果:

    <img src="/img/common/tuhao.png?v=ee283a76b9">
    <link rel="stylesheet" type="text/css" href="/css/forum.css?v=bf5de1c040">
    <script type='text/javascript' src="/js/component/flexible.js?v=e2afd4dade"></script>
    css中:
    background: url(/img/all.png?v=d69570864e) no-repeat;
    

    可能出现的问题:

    权限问题,建议删除node_modules文件夹,把gulp插件重新构建 

    npm install
    

    如果不行,看下是否是windows下的gulp操作虚拟机中的文件,如果是,尝试在虚拟机中重新安装node npm gulp然后运行试试。

     gulpfile.js 源码参考

  • 相关阅读:
    vue使用elementui合并table
    使用layui框架导出table表为excel
    vue使用elementui框架,导出table表格为excel格式
    前台传数据给后台的几种方式
    uni.app图片同比例缩放
    我的博客
    【C语言】取16进制的每一位
    SharePoint Solution 是如何部署的呢 ???
    无效的数据被用来用作更新列表项 Invalid data has been used to update the list item. The field you are trying to update may be read only.
    SharePoint 判断用户在文件夹上是否有权限的方法
  • 原文地址:https://www.cnblogs.com/saysmy/p/5742207.html
Copyright © 2011-2022 走看看