文章标签 » css

发现一个好用的python版js压缩工具

https://github.com/rspivak/slimit
灰常好的工具,压缩比高,代码兼容性好,可媲美主流压缩工具~
做了下简单的benchmark:

#raw
256K jquery-1.8.1.js
#download from jquery.com
 92K jquery-1.8.1.min.js
 36K jquery-1.8.1.min.js.gz
#http://closure-compiler.appspot.com
 84K jquery-1.8.1.google.advanced.js
 32K jquery-1.8.1.google.advanced.js.gz
 92K jquery-1.8.1.google.simple.js
 36K jquery-1.8.1.google.simple.js.gz
#http://dean.edwards.name/packer
120K jquery-1.8.1.packer.js
 40K jquery-1.8.1.packer.js.gz
#http://refresh-sf.com/yui
#Uncaught SyntaxError: Unexpected token } 
 64K jquery-1.8.1.yui.js
 24K jquery-1.8.1.yui.js.gz
#slimit
 96K jquery-1.8.1.slimit.js
 36K jquery-1.8.1.slimit.js.gz

yui的虽然最nb,拉开其他工具一大截,但是压出来已经不能用了,难道是我点击提交按钮的方式不对??

实际使用时,我用的环境是redhat5.x,python环境较为恶劣,slimit只兼容到python 2.7,于是单独做了一个”便携版本”,可以兼容到2.4,并且相关依赖也放到一起,下载即用:)
https://github.com/emptyhua/js-css-minify-portable

纯sed压缩css文件

额,如果不考虑用java,还是可以考虑考虑这个…

#!/bin/sh
#"^M"用来代替显示win下的换行符,直接复制这段脚本是不能用滴
cat $1 | sed -e 's/^M//g;s/^\xef\xbb\xbf//g;s/\([^0-9]\)0p[xt]/\10/g' -e 's/\/\*.*\*\///g' | sed -e '/^[\t ]*\/\*/,/\*\/[\t ]*$/d' | sed -e '/^[\t ]*$/d' -e 's/^[\t ]*//g' -e 's/;[\t ]*/;/g' -e 's/}[\t ]*/}/g' -e 's/\([^,\{;\}]\)$/\1;/g' -e 's/};/}/g' | sed -e :a -e '/[,;{][\t ]*$/{N;s/\n/ /;ba}' > /tmp/lala_css
mv /tmp/lala_css $1

压缩规则较简单..

  • 删除注释
  • 删除不必要的空白
  • 删除window的utf BOM标记,删除win下的换行符
  • 每条规则压成一行
  • 0px -> 0

压缩效果如下,比yuicompressor差一点:

 72344 2009-12-01 19:57 layout.css
 69626 2009-12-01 19:52 layout-mini-sed.css
 68720 2009-12-01 19:56 layout-mini-yui.css

文件下载点这里:compress-css.zip

ie6下filter造成图片出现白点


正常的图片

添加透明之后

shell:创建单独的样式hack文件

不管怎么说,通过”<!–[if lte IE 6]>”的形式单独加载patch文件是一种不错的做法,用ff的用户不用为这些为ie而做的恶心patch浪费流量,页面的渲染速度也许会有所提升。

下午靖威同学跟我说,可不可以写一个脚本可以提取样式表中的hack,生成单独的hack文件,这样可以大大减少单独维护hack文件的成本。感觉想法不错,难度也不是很大,参考了一下shell说明,写了几句,先备个忘,下周有时间测试一下。。

#!/bin/bash
echo "$1/csspro/"
find "$1/csspro/" -name *.css | grep -v "ie[67]" > /tmp/allcss.tmp
cat /tmp/allcss.tmp | xargs -i sed -i '/^$/d;s/\\{\\s/\\{/;s/\\;\\s/\\;/;s/\\s\\}/\\}/;s/\/\*.*\*\///;/^[\t ]*\/\*/,/\*\/[\t ]*$/d' {}
cat /tmp/allcss.tmp | xargs -i sed -n '/* *html/p' {}  >> "$1/csspro/patch/ie6.css"
cat /tmp/allcss.tmp | xargs -i sed -n '/*+html/p' {}  >> "$1/csspro/patch/ie7.css"
cat /tmp/allcss.tmp | xargs -i sed -i '/* *html/d;/*+html/d' {}
rm /tmp/allcss.tmp

IE下filter失效的问题

请在ie下测试一下代码

<p style="width:auto;color:#FFF;background:#066;filter:alpha(opacity=50);">使用 filter 透明度效果(这个是不生效的)</p>
<p style="zoom:1;color:#FFF;background:#066;filter:alpha(opacity=50);">使用 filter 透明度效果(使用zoom使其拥有布局)</p>

原因是只有当元素的hasLayout为true时,filter才会生效,真贱~~
参阅:http://audi.tw/Blog/CSS/css.zoom.filter.alpha.opacity.asp