项目开发中,经常会用到的图片进行修改,而CDN都会对图片做cache,如果图片更新了不做其他处理的话,用户端的图片则无法更新(删浏览器cache刷新除外)。

因此每次修改完图片,都需要去更新css所引用的图片url。通常的做法是给图片后面加个时间戳,如:./images/sprite.png?20120714001。但是人工修改这东西是个挺蛋疼的事,咱是程序员, 不应该干这些繁杂无趣的事对不对。

所以阿拉整了个python脚本来干这事(貌似最近写脚本写上瘾了,汗-_-||)。原理是读取css文件,遍历图片url,然后读取图片的svn版本跟url带的版本号比较。如果比较新则更新url。

用法:把脚本放到项目目录(推荐),然后指定inputDir为css文件的目录,用python执行它就行啦。如果有发布编辑脚本,也可以加入到发布脚本里面。

脚本代码如下,注释已经比较详细了。more

#auto update the timestamp of image url
import re
import os
#css文件的目录放在这里,该脚本可以放在项目的根目录
inputDir = './css/'
p = re.compile('url\([\'\"]?((.+?)\.(png|jpg|jpeg|gif))[\'\"]?\)',re.I)
revRegex = re.compile('Last Changed Rev: (\d+)')
#从url读取时间戳
def getTimestampArr(url):
    i = url.find('?')
    if i != -1:
        m = url.split('?')
        return m
    else:
        return [url, 0]
#根据传入url,读取svn的文件版本号
def getLastModifyVer(url):
    cmd = 'svn info ' + url
    ret = os.popen(cmd)
    info = ret.read()
#svn 的版本只能通过提取svn info的信息
    ver = revRegex.findall(info)
    if ver:
        ver = ver[0]
    else:
        ver = 0
    return ver

files = os.listdir(inputDir)
cssFiles = []
#find all css files
for f in files:
    f = f.lower()
    if f.endswith('.css'):
        cssFiles.append(f)
#read all image url and compare the timestamp
for f in cssFiles:
    out = open(inputDir + f, 'r+')
    content = out.read()
    m = p.findall(content)
    if m:
        replaceCache = {}
        for u in m:
            u = u[0]
#如果图片的url是绝对路径,则可能是不在svn版本库的,干脆不处理
            if u.startswith('http://'):
                continue
            tarr = getTimestampArr(u)
            oldT = tarr[1]
            newT = getLastModifyVer(inputDir + u)
            #if modified, change the timestamp
            if newT > oldT and (not replaceCache.has_key(u)):
                newUrl = tarr[0] + '?' + newT
                content = content.replace(u, newUrl)
                replaceCache[u] = 1
            else: 
                continue
        #write to file
        out.seek(0)
        out.write(content)
        out.close()
Comments
Write a Comment

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟