如何使用JS和CSS优化工具Minify

这篇文章主要介绍“如何使用JS和CSS优化工具Minify”，在日常操作中，相信很多人在如何使用JS和CSS优化工具Minify问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用JS和CSS优化工具Minify”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

一、实现合并和压缩多个JS和CSS文件的代码

HTML：

复制代码 代码如下:

<link rel="stylesheet" type="text/css" href="cssmin.php?get=base,style1,style2,global&path=css/&v=20131023" />
<script type="text/javascript" src="jsmin.php?get=jquery-1.6.4.min.js,minjquery.js,minjquery.ui.js,test.js,global.js&path=js/&v=20131023"></script>

PHP：

复制代码 代码如下:

//输出JS
header ("Content-type:Application/x-javascript; Charset: utf-8");
if(isset($_GET)) {
 $files = explode(",", $_GET['get']);
 $str = '';
 foreach ($files as $key => $val){
  $str .= file_get_contents($_GET['path'].$val);
 }

 $str = str_replace("\t", "", $str); //清除空格
 $str = str_replace("\r\n", "", $str);
 $str = str_replace("\n", "", $str);

 // 删除单行注释
 $str = preg_replace("/\/\/\s*[a-zA-Z0-9_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/", "", $str);
 // 删除多行注释
 $str = preg_replace("/\/\*[^\/]*\*\//s", "", $str);

 echo $str;
}

//输出CSS
header ("content-type:text/css; charset: utf-8");
if(isset($_GET)) {
 $files = explode(",", $_GET['get']);
 $fc = '';
 foreach ($files as $key => $val){
  $fc .= file_get_contents($_GET['path'].$val.".css");
 }
 $fc = str_replace("\t", "", $fc); //清除空格
 $fc = str_replace("\r\n", "", $fc);
 $fc = str_replace("\n", "", $fc);
 $fc = preg_replace("/\/\*[^\/]*\*\//s", "", $fc);
 echo $fc;
}

只是个简单原型，没有封装。另外，合并后的文件记得配合缓存

二、Minify的使用方法

1、从code.google.com/p/minify/下载最新版Minify并解压缩，将"min"文件夹连同里面的内容一起复制到DOCUMENT_ROOT目录下（即网站跟目录）。

可以修改文件夹名"min"

2、在"min/groupsConfig.php"里配置g参数

复制代码 代码如下:

return array(
  // 'js' => array('//js/file1.js', '//js/file2.js'),
  // 'css' => array('//css/file1.css', '//css/file2.css'),
);

3、在网页中按照如下方式引用就可以了：

<script type="text/javascript" src="/min/g=js&20140519"></script>

后面的数字可以用更新日期来作标志，"min"和步骤1里的名称对应。

4、性能优化，请参考code.google.com/p/minify/wiki/CookBook

注意：

1、需要将httpd.conf里的rewrite_module模块开启

2、开发过程中，可以将调试模式开启，开发完毕后再将调试模式关闭，可以利用火狐浏览器的firebug来查看

复制代码 代码如下:

$min_allowDebugFlag = true

到此，关于“如何使用JS和CSS优化工具Minify”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！