zoukankan      html  css  js  c++  java
  • 通过gulp为requireJs引入的模块添加版本号

    由于项目用到requireJs,并且通过gulp来对项目进行统一的管理,为了防止浏览器对文件进行缓存,所以通过gulp为项目中的文件添加版本号。

     

    1、分别安装gulp-rev、gulp-rev-collerctor  

    npm install --save-dev gulp-rev
    npm install --save-dev gulp-rev-collector
    

    打包后的效果

    "/css/style.css" => "/dist/css/style-1d87bebe.css"    
    "/js/script1.js" => "/dist/script1-61e0be79.js" 
    

      

    预期效果

    "/css/style.css" => "/dist/css/style.css?v=1d87bebe"
    "/js/script1.js" => "/dist/script1.js?v=61e0be79"

    2、打开node_modules\gulp-rev\index.js

    //第144行
    manifest[originalFile] = revisionedFile;
    //改为
    manifest[originalFile] = originalFile + '?v=' + file.revHash;

    3、打开node_modules\rev-path\index.js

    //第10行
    return filename + '-' + hash + ext;
    //改为
    return filename + ext;

    4.打开node_modules\gulp-rev-collector\index.js

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

      

    5.gulp生成版本号并替换html,css,js文件中的文件引入路径(网上教程很多,这里不多说上连接)

      http://www.tuicool.com/articles/UbaqyyJ

      http://www.cnblogs.com/givebest/p/4707432.html

      

    6.引入路径注意事项

       各个文件中的路径必须和修改版本号的json文件中的根路径必须一致(包括require.config.paths 路径),这样gulp才可以替换掉

    //json文件
    {
        "app/css/demo.css":"app/css/demo.css?v=768b6e5d87",
        "app/js/demo.js":"app/js/demo.js?v=09521ddbe3",
        "app/js/a.js":"app/js/a.js?v=59dd7446a0"
    }
    
    <!--require的入口文件必须写完整路径-->
    <script src="../lib/requires/requires.js" data-main="js/a"></script>
    <!--改为-->
    <script src="../lib/requires/requires.js" data-main="../app/js/a.js"></script>
    <!--输出-->
    <script src="../lib/requires/requires.js" data-main="../app/js/a.js?v=59dd7446a0"></script>

      require.config.paths 

    paths:{
        "demo":"../app/js/demo"
    }
    //改为
    paths:{
        "demo":"../app/js/demo.js"
    }
    //输出配置文件后
    paths:{
        "demo":"../app/js/demo.js?v=09521ddbe3"
    }
    

      

    7.修改require.js 源码解决引入路径中含有search值得路径报错问题(版本 "1.0.8")

      修改resume 函数 在1169行后添加

      

    //修改resume 函数 在1169行后添加
    
    if( url.indexOf('?v=') !== -1 ){
        if( /\.js$/.test(url) ){
            url = url.slice(0,-3);
        }
    }
    if( /\.js\.js$/.test(url) ){
        url = url.slice(0,-3);
    }
    

      

    //修改nameToUrl函数 在 moduleName 赋值( 1488行)后添加
    var recordUrl = '';
    if( moduleName.indexOf('.js?') > -1 ){
        recordUrl = moduleName.slice(moduleName.indexOf('?'));
        moduleName = moduleName.slice(0,moduleName.indexOf('.js'));
    }
    //在生成文件路径后 (typeof config.urlArgs === 'string' 判断之前) 修改路径地址  
    url = url + recordUrl; if (!config.urlArgs) { return url; }
    

      

      

  • 相关阅读:
    pyspark读取parquet数据
    python求时间差
    pandas索引操作之loc,iloc,ix等方法
    pandas的concat和drop函数
    mysql语句的书写顺序和执行顺序
    hive的lower,upper,length,concat,lpad,rpad,cast,split函数简述
    hive的floor函数,ceil函数,round函数
    Pandas建立空的dataframe和cumsum累加函数
    Python基础笔记二之求序列均值、标准差、中位数、分位数
    NAT实验
  • 原文地址:https://www.cnblogs.com/shihao905/p/6229644.html
Copyright © 2011-2022 走看看