用php脚本给html中引用的js和css路径打上版本
比如
<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();
}
用php脚本给html中引用的js和css路径打上版本的更多相关文章
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- html引用外部js和css
html引用外部js和css css:<link rel="stylesheet" type="text/css" href="xx.css&q ...
- ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法
最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用 ...
- vue2项目中引用外部js文件
vue2项目目录如下(utils文件夹是自己手工建的,然后在utils里新建js文件): 使用import导入文件时,注意路径,路径不对会报错: 导入之后使用外部js函数时,直接写导入时的名字加小括号 ...
- 原生aspx页面如何引用公共js和css
项目过程中遇到一个问题,每个页面需要引用很多的js和css文件,其中很多都是控件,而且大部分都是一样的,造成很多重复引用. 针对这种情况,参考了mvc的BundleConfig,思路是建立一个公用的用 ...
- django模板中如何导入js、css等外部文件
本教程只适合Django1.4版本.(1.8版本之后不需要这么麻烦,详见 http://www.cnblogs.com/ryan255/p/5465608.html) html模板里面使用了css,但 ...
- HTML中引用外部JS文件失效原因
今天在练习中碰到“引用外部的一个js文件但是却失效”的情况,实在不懂,百度后才知是引用的位置不对,错误的代码如下: <head> <meta charset="UTF-8& ...
- nodejs中引用其他js文件中的函数
基本语句 require('js文件路径'); 使用方法 举个例子,在同一个目录下,有app.fun1.fun2三个js文件. 1. app.js var fun1 = require('./fun1 ...
- angulajs中引用chart.js做报表,修改线条样式
目前还有个问题,在手机上看,当折线y轴值超过1000,会有点问题 1.下载chart js,可以用bower 命令下载 http://www.chartjs.org/docs/#line-chart- ...
随机推荐
- HalconMFC(一)之多版本配置
今天比较匆忙,还得写周六日考试扯P的PPT,就先这样开个头吧.我的电脑是win7,32位的系统,我用Halcon10.0.但是很多小伙伴的都是64位系统的,所以我用小伙伴的64位系统试过很多次用VC配 ...
- 如何使用.NET开发全版本支持的Outlook插件产品(三)——全面控制
插件项目所有代码都已经上传至 https://github.com/VanPan/TestOutlookAdding 进阶基础--COM查看 首先,对于Outlook对象模型,MSDN早就有非常详细的 ...
- iOS 判断View 是否是第一次显示
在实现某些需求的时候会有这样的情况,页面第一次加载显示的时候需要某些操作,而以后就不需要重复执行了, 一般这种处理都放在- (void)viewDidLoad或- (id)init因为一般这两个函数除 ...
- POJ 题目2411 Mondriaan's Dream(状压DP)
Mondriaan's Dream Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 13519 Accepted: 787 ...
- 自动生成数据库字典(sql2008)
每次做项目的时候都要做数据字典,这种重复的工作实在很是痛苦,于是广找资料,终于完成了自动生成数据库字典的工作,废话少说,上代码. 存储过程: SET ANSI_NULLS ON GO SET QUOT ...
- Amazon AWS 架设EC2服务器(datizi)fanqiang (更新手机VPN/L2TP设置)
今天用AWS在东京架设了一台服务器用来个人fanqiang.为什么用AWS呢,阿里云学生价9.9可以搭在香港,但是我的学制今年2月份在学信网上就到期了,腾讯云holy shit,我司AZURE据说员工 ...
- 自定义 placeholder 文本颜色
原文 http://zhuyujia.github.io/2016/01/custom-placeholder-text-color.html Css: ::-webkit-input-placeh ...
- window.onload() 和 $(function(){})
再使用 $(function(){})的时候,发现一直取不到元素.但是换成window.onload()则可以取到. 大概推测是页面加载问题,于是把js从header移到了footer,发现 $(fu ...
- 关于Python中的文件操作(转)
总是记不住API.昨晚写的时候用到了这些,但是没记住,于是就索性整理一下吧: python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Pyth ...
- iOS多线程学习及总结
能有份网上的存储资料,备以后提升及参考 iOS 多线程编程 简介 一. iOS有三种多线程编程的技术,分别是: 1. NSThread 2. Cocoa NSOp ...