程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> PHP小技巧之JS和CSS優化工具Minify的使用方法

PHP小技巧之JS和CSS優化工具Minify的使用方法

編輯:關於PHP編程

一、實現合並和壓縮多個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

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved