


How to use php script to add version numbers to js and css paths referenced in html, jscss_PHP tutorial
如何使用php脚本给html中引用的js和css路径打上版本号,jscss
在搜索引擎中搜索关键字.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(); }

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
