您好,登錄后才能下訂單哦!
這篇文章主要介紹“如何使用JS和CSS優(yōu)化工具M(jìn)inify”,在日常操作中,相信很多人在如何使用JS和CSS優(yōu)化工具M(jìn)inify問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”如何使用JS和CSS優(yōu)化工具M(jìn)inify”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
一、實(shí)現(xiàn)合并和壓縮多個(gè)JS和CSS文件的代碼
HTML:
復(fù)制代碼 代碼如下:
<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:
復(fù)制代碼 代碼如下:
//輸出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;
}
只是個(gè)簡(jiǎn)單原型,沒(méi)有封裝。另外,合并后的文件記得配合緩存
二、Minify的使用方法
1、從code.google.com/p/minify/下載最新版Minify并解壓縮,將"min"文件夾連同里面的內(nèi)容一起復(fù)制到DOCUMENT_ROOT目錄下(即網(wǎng)站跟目錄)。
可以修改文件夾名"min"
2、在"min/groupsConfig.php"里配置g參數(shù)
復(fù)制代碼 代碼如下:
return array(
// 'js' => array('//js/file1.js', '//js/file2.js'),
// 'css' => array('//css/file1.css', '//css/file2.css'),
);
3、在網(wǎng)頁(yè)中按照如下方式引用就可以了:
<script type="text/javascript" src="/min/g=js&20140519"></script>
后面的數(shù)字可以用更新日期來(lái)作標(biāo)志,"min"和步驟1里的名稱對(duì)應(yīng)。
4、性能優(yōu)化,請(qǐng)參考code.google.com/p/minify/wiki/CookBook
注意:
1、需要將httpd.conf里的rewrite_module模塊開(kāi)啟
2、開(kāi)發(fā)過(guò)程中,可以將調(diào)試模式開(kāi)啟,開(kāi)發(fā)完畢后再將調(diào)試模式關(guān)閉,可以利用火狐瀏覽器的firebug來(lái)查看
復(fù)制代碼 代碼如下:
$min_allowDebugFlag = true
到此,關(guān)于“如何使用JS和CSS優(yōu)化工具M(jìn)inify”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。