如何使用php脚本给html中引用的js和css路径打上版本号

5年以前 | 阅读数：880 次 | 编程语言：PHP

在搜索引擎中搜索关键字.htaccess 缓存，你可以搜索到很多关于设置网站文件缓存的教程，通过设置可以将css、js等不太经常更新的文件缓存在浏览器端，这样访客每次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、js等，而不必从你的服务器读取，这样在一定程度上加快了网站的打开速度，又可以节约一下你的服务器流量。

具体文字说明不给大家多说了，下面通过代码实例给大家讲解。

比如


    <link rel="stylesheet" type="text/css" href="./css/globel.css">
    <script src="./js/config.js"></script>

中的href和src加上版本


    <link rel="stylesheet" type="text/css" href="./css/globel.css?eslc-app=3-0-2">
    <script src="./js/config.js?eslc-app=3-0-2"></script>

当然如果不是前后端分离得干干净净的，就没必要这么额外的这样自己在写个脚本去打版本。

打版本的好处：

解决外部引用文件实时更新问题。比如

pc端上主要体现在 iframe中的外部引用文件不会实时更新。

wap端上部分app也是比如微信。如果你的网页是嵌到自己的app，那也更不用说了。

用php写了个类


    //生成版本
    //清除版本
    class ReplaceVersion{
     protected $filePostFixs = array();
     protected $versionName = null;
     protected $version = null;
     protected $path = null;
     /**
      * @param mixed $configs 
      * @param [type] $profix [description]
      * @param [type] $path  [description]
      */
     public function __construct($configs, $profix, $path){
      if (!$this->isCanRun()) {
       $this->error('必须在内网环境 10.10.0开头才可运行'); //exit;
      }
      $this->setVersion($configs);
      $this->setFilePostFix($profix);
      $this->path = $path;
     }
     protected function isCanRun(){
      if (strpos($_SERVER['HTTP_HOST'], '10.10.0') !== false) {
       return true;
      }
      return false;
     }
     /**
      * 匹配到script节点
      * @param array $match 匹配到的script
      * @return string 处理好的script
      */
     protected function callbackScript($match){
      //["<script src="../js/config.js?is=new"></script>", "../js/config.js", "?is=new"]
      /*/<script.*?src=\"(.*?)(\?.*?|\?)?\".*?><\/script>/*/
      $str = $match[0];
      $pattern = '/(<script.*?src=\")(.*)?(\"><\/script>)/';
      return $this->callbackMatch($str, $pattern);
     }
     /**
      * 匹配到css节点
      * @param array $match 匹配到的css
      * @return string 处理好的css
      */
     protected function callbackCss($match){
      // '<link rel="stylesheet" type="text/css" href="../css/globel.css">';
      $str = $match[0];
      $pattern = '/(<link.*?href=\")(.*)?(\".*?>)/';
      return $this->callbackMatch($str, $pattern);
     }
     /**
      * 回调模式匹配
      * @param string $str 
      * @param string $pattern
      * @return string  
      */
     protected function callbackMatch($str, $pattern){
      switch ($this->dealFlag) {
       case 'replace':
        return $this->replaceCallbackMatch($str, $pattern);
       case 'clean':
        return $this->cleanCallbackMatch($str, $pattern);
       default:
        $this->error('非法模式');
      }
     }
     /**
      * 替换版本
      * @param string $str 待处理的string
      * @param string $pattern 正则
      * @return string  处理后的string
      */
     protected function replaceCallbackMatch($str, $pattern){
      if (!preg_match($pattern, $str, $third)) {
       return $str;
      }
      $arr  = explode('?', $third[2]);
      $len  = count($arr);
      $versionName = $this->versionName;
      $version = $this->version;
      if ($len === 1) {//没有问号
       $arr[0] .= '?'. $versionName. '='. $version;
      }else{//有问号
       if (preg_match('/(^|\&)'. $versionName.'=(.*?)($|\&)/', $arr[1])) {//存在
        $arr[1] = preg_replace('/(^|\&)'. $versionName.'=(.*?)($|\&)/', '$1'. $versionName.'='. $version. '$3', $arr[1]);
        $arr[0] .= '?'. $arr[1];
       }else{//不存在
        $arr[0] .= '?'. $arr[1]. '&'. $versionName. '='. $version;
       }
      }
      return $third[1]. $arr[0]. $third[3];
     }
     /**
      * 清除版本
      * @param string $str 待清除的版本
      * @param string $pattern 正则
      * @return string  清除后的string
      */
     protected function cleanCallbackMatch($str, $pattern){
      if (!preg_match($pattern, $str, $third)) {
       return $str;
      }
      $arr  = explode('?', $third[2]);
      $len  = count($arr);
      $versionName = $this->versionName;
      if ($len > 1 && strpos($arr[1], $versionName. '=') !== false) {
       $arr[1] = preg_replace('/(^|\&)'. $versionName.'=(.*?)($|\&)/', '$1', $arr[1]);
       substr($arr[1], -1) === '&' && ($arr[1] = substr($arr[1], 0, -1));
       $arr[0] .= strlen($arr[1]) > 0 ? '?'. $arr[1] : '';
       $str = $third[1]. $arr[0]. $third[3];
      }
      return $str;
     }
     /**
      * 执行
      */
     protected function run(){
      if ($this->path == '') {
       $this->error('empty path');
       return ;
      }
      if (is_dir($this->path)) {
       $this->setDirFilesVersion( $this->path );
      }else if(is_file($this->path)){
       $this->setFileVersion( $this->path );
      }else{
       $this->error('error path');
      }
     }
     /**
      * 添加版本
      */
     public function replace(){
      $this->dealFlag = 'replace';
      $this->run();
      echo 'replace success';
     }
     /**
      * 清除版本
      */
     public function clean(){
      $this->dealFlag = 'clean';
      $this->run();
      echo 'clean success';
     }
     protected function success(){
     }
     protected function error($errorMsg){
      echo $errorMsg;
      exit();
     }
     protected function setDirFilesVersion($dir){
      $handle = null;
      $file  = null;
      if ( $handle = opendir($dir)) {
       while ( false !== ($file = readdir($handle)) ) {
        if ($file === '.' || $file === '..' || strpos($file, '.') === -1 ) {continue;}
        $this->setFileVersion($file);
       }
      }
     }
     protected function setFileVersion($file){
      $temp = null;
      /*$pattern = '/<script.*?src=\"(.*?)(\?.*?|\?)?\".*?><\/script>/';*/
      $temp = explode('.', $file) ;
      if ( ! $this->isNeedReplacePostFix(array_pop( $temp )) ) {return;}
      $content = null;
      $content = file_get_contents($file);
      $content = preg_replace_callback('/<script.*?><\/script>/', array(&$this, 'callbackScript'), $content);
      $content = preg_replace_callback('/<link.*?type="text\/css".*?>/', array(&$this, 'callbackCss'), $content);
      // highlight_string($content);
      file_put_contents($file, $content);
     }
     /**
      * 获得版本
      * @param mixed $configs array( 'versionName' : 'version') || $versionName
      */
     protected function setVersion($configs){
      // last_wap_version  = '3-0-0', 
      // wap_version = '3-0-1',
      if (is_array($configs) && $configs > 0) {
       foreach ($configs as $key => $value) {
        $this->version = $value;
        $this->versionName = $key;
       }
      }else if(is_string($configs) && $configs != ''){
       $configs = explode(',', $configs);
       $this->versionName = $configs[0];
       count($configs) == 2 && ($this->version = $configs[1]);
      }else{
       $this->error('the version is empty');
      }
     }
     /**
      * 通过后缀判断该文件是否要添加或清除版本
      * @param string $profix 后缀
      * @return boolean  true | false
      */
     protected function isNeedReplacePostFix($profix){
      if (in_array($profix, $this->filePostFixs)) {
       return true;
      }
      return false;
     }
     /**
      * 设置需要操作的后缀
      */
     public function setFilePostFix($profix){
      if (is_array($profix)) {
       count($profix) > 0 && ( $this->filePostFixs = array_merge($this->filePostFixs, $profix) );
      }else if(is_string($profix)){
       $this->filePostFixs[] = $profix;
      }
     }
    }

使用：


    $dir  = __DIR__;
    $is_clean = false;
    //$is_clean = true;
    //第一个参就是版本信息, 第二个就是要匹配的文件后缀, 第三个是要匹配的目录或者文件
    if ($is_clean) {//清除版本
     $configs = 'eslc-wap';
     $replaceObj = new ReplaceVersion($configs, array('html'), $dir);
     $replaceObj->clean();
    }else{//添加或替换版本
     $configs = array('eslc-wap' => '1.0.1');//也可以写成 $configs = 'eslc-wap, 1.0.1';
     $replaceObj = new ReplaceVersion($configs, array('html'), $dir);
     $replaceObj->replace();
    }