yuicompressor这是个很好的工具,通过java库编译css或js文件进行压缩。压缩css或者js文件的好处是很多的,减少数据请求量,可以更快的进行数据传输,防止其他人进行窥探或整体直接挪用等等。。。
首先你要去下载一个yuicompressor现在最新版本是2.4.7 下载地址: yuicompressor 使用方法怎么工作在这里都有详细的说明,就不一一介绍了。
最常用的yuicompressor语法就是
[code]
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js –charset utf-8
[/code]
其中需要注意的地方就是 如果不在yuicompressor-x.y.z.jar这个文件目录下,需要采用绝对的路径比如 E:/compressor/yuicompressor/build/yuicompressor-x.y.z.jar 这样的。同样需压缩文件myfile.js和压缩后输出的文件myfile-min.js 也是一样的采用绝对的路径。
好了,有了yuicompressor后;就要首先有一个java环境,不知道是否已安装java环境的可以通过 运行 ->cmd 输入
java -version
如果看到
java的版本结果就说明java的运行环境是ok的了。如果没有这个结果,不用担心可以去oracle官网去下载。如果觉得下载比较慢可以直接百度搜索java jdk下载,下载完成后下一步,下一步安装完成即可。
不出问题,你现在就可以正常的运行yuicompressor了,能够进行完成压缩文件了。
但是这样就出现了一个问题每次通过这样来执行,只能执行一个文件。我们的css和js文件通常有很多,不能一下完全执行,所以就写了一个小应用,直接输入本地的css和js目录就可以直接遍历压缩完成,这样就很省事了。
三个文件index.php ,index.tpl.html , do.php 很小
好吧,直接上码。
index.php
<?php /** * @author alex * @time 2011年12月1日 * @todo php通过yuicompressor批量压缩css和js文件 * @email leiyu_ai@qq.com */ session_start(); require_once 'index.tpl.html'; ?>
index.tpl.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>compressor js/css</title> <style type="text/css"> body { font: 12px Microsoft Yahei, Verdana, Geneva, sans-serif, "宋体"; } h1,h2,h4 { margin: 0; padding: 0; font-weight: normal; } input { border: 1px solid #eee; } form span { display: inline-block; width: 80px; } form h4 { margin-bottom: 10px; } .go { border-color: #000; } </style> </head> <body> <?php $_SESSION['rand'] = mt_rand(100,999); ?> <form action="do.php" method="post"> <h4><span>css文件目录</span><input type="text" name="cssdir" /></h4> <h4><span>js文件目录</span><input type="text" name="jsdir" /></h4> <h4><input type="submit" name="go" value="提交" /><input type="hidden" name="rand" value="<?php echo $_SESSION['rand'];?>" /></h4> </form> </body> </html>
do.php
<?php /* * 示例:我的yuicompressor-2.4.7.jar是放在这个地址下的,所以在运行前请更改为你的存放地址 * $cmd = "java -jar E:/compressor/yuicompressor-2.4.7/build/yuicompressor-2.4.7.jar --type js --charset utf-8 -o E:/tmp/js/home.min.js". * " E:/tmp/js/home.js"; */ session_start(); header('Content-type:text/html; charset=utf-8'); $rand = $_POST['rand']; $srand = isset($_SESSION['rand'])? $_SESSION['rand']: ''; $submit = $_POST['go']; if ($rand == $srand ){ if ($submit){ $jsdir = $_POST['jsdir']; $cssdir = $_POST['cssdir']; if ( !empty($jsdir) || !empty($cssdir)){ // 获取所有的文件集合 $jslist = getFileList($jsdir); $csslist = getFileList($cssdir); // 压缩js、css文件内容 $bool = doIt($jslist); $boolc = doIt($csslist); if ( $bool || $boolc){ echo $jsdir.'|'.$cssdir.' 目录执行成功'; }else{ echo $jsdir.'|'.$cssdir.' 目录执行失败'; } }else { echo '请输入css或js的文件目录'; } echo ' <a href="'.$_SERVER['HTTP_REFERER'].'">返回首页</a>'; } unset($_SESSION['rand']); } function getExt($file){ return strrev(substr(strrev($file), 0, strpos(strrev($file),'.'))); } function getName ($file){ return strrev(substr(strrev($file), strpos(strrev($file),'.')+1 )); } function getPathFile($dir, $file){ return $dir.DIRECTORY_SEPARATOR.$file; } function doIt($list){ $tfile = $list[0][0]; $ext = getExt($tfile); foreach($list as $key=>$val){ $cmd = "java -jar E:/compressor/yuicompressor-2.4.7/build/yuicompressor-2.4.7.jar --type {$ext} --charset utf-8 -o {$val[1]}". " {$val[0]}"; exec($cmd, $output, $rv); // 执行成功 if ( $rv == 0){ // 删除源文件 unlink($val[0]); // 重命名新的压缩文件 rename($val[1], $val[0]); }else { $str .= $val[0].','; } } if (!empty( $str)){ echo $str.' 执行失败'; return false; }else { return true; } } function getFileList($dir){ $filelist = array(); if (is_dir($dir)){ $handle = opendir($dir); while(($file = readdir($handle)) !== false){ if ( $file == '.' || $file == '..') continue; $tmpdir = getPathFile($dir, $file); if ( is_dir( $tmpdir)){ $rs = getFileList( $tmpdir); if ( !empty($rs)){ $filelist = array_merge($filelist, $rs); } }else { $filename = getName($file); $ext = getExt($file); $file = getPathFile($dir, $file); // 源文件完整路径 $minname = getPathFile($dir, $filename.'.min.'.$ext); // 压缩目标文件名称完整路径 $filelist[] = array($file, $minname); } } closedir($handle); return $filelist; }else{ return false; } } ?>
ok完成。现在展示下我的测试结果
css文件
压缩前: 压缩后:
js 文件
压缩前: 压缩后:
效果还是很明显的~~ ^_^