PHP小技巧之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

(0)

相关推荐

  • js工具方法弹出蒙版

    复制代码 代码如下: //工具方法弹出蒙版 add by dning 2012-11-4var maskShow = (function () {    var mask = null;    var curr = null;    var free = false;    var func = {        onresize: null,        onscroll: null    };    return function (el, fre, Type) {        if (

  • js实现带关闭按钮始终显示在网页最底部工具条的方法

    本文实例讲述了js实现带关闭按钮始终显示在网页最底部工具条的方法.分享给大家供大家参考.具体如下: 这是一款很实用的代码,给网页加入一个始终显示在浏览器窗口底部的工具栏,可以在上面放上公告,联系人等等信息,此代码的工具条还带有关闭按钮,可以随时关闭 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

  • 解决http://16a.us/2.js之arp欺骗的方法附专杀工具

    公司局域网访问所有页面都加上了<script src=http://16a.us/2.js></script>代码, 这次是客户端打开的所有网页,故可排除是服务器环境遭遇arp欺骗,综合网上各方意见,得出结论:本地网关或dns被劫持,修复本地连接后故障消除. 根本解决方法,绑定网关mac地址,方法为: 命令行输入arp -s 网关IP 网关MAC 关于网关MAC,可使用arp命令查询. 如果是dns被劫持,则更改dns服务器. 关于js加密解密的两篇文章,想研究上面病毒脚本的朋友可

  • 一款js和css代码压缩工具[附JAVA环境配置方法]

    TBCompressor的安装很简单,点击install.cmd就可以了,安装后会在里的右键菜单里出现"Compress CSS or JS"选项,需要压缩文件时只需选取目标文件然后右键点选"Compress CSS or JS"即刻.压缩后的文件会自动重命名. 这里对jQuery1.3 Development版进行压缩测试,效果如下:可以看到效果还是非常不错的:) TBCompressor下载 需要注意的是使用TBCompressor必须要有JAVA环境的支持,需

  • Angular工具方法学习

    angular为我们提供了很多的工具方法. angular.bind 更改this指向 var obj1 = { name : 'obj1', show : function(str){ return this.name + str; } }; var obj2 = { name : 'obj2' }; var a = angular.bind(obj2,obj1.show,' is a object'); var b = angular.bind(obj2,obj1.show,[' is a

  • js调试工具console.log()方法查看js代码的执行情况

    我之前在调试代码的时候,跟砸js代码执行情况,一般都是通过在代码块中使用alert的方式查看js代码的执行情况,今天也是看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log的使用情况进行记录,具体的语法是: console.log("值为:",fn); console.log()能够输出变量,函数,数组,对象等等 <html> <head> <title>this关键字_函数调用</title>

  • 常用Extjs工具:Extjs.util.Format使用方法

    抄些常用工具方便查找 ----------字符串 Ext.util.Format.capitalize(string str);//将首字母变大写 Ext.util.Format.ellipsis(string value, Number length);//截取指定length字符,将自动在尾处添加省略号'...' Ext.util.Format.htmlEncode(string value); //将文本编码 lowercase(string value);//变小写 stripScrip

  • node.js版本管理工具n无效的原理和解决方法

    简介 n 是 node 的一个模块,可以用它来管理 node 的各种版本.类似 Python 中的 pyenv 和 Ruby 的 rbenv.n 的作者是著名的TJ大神. 通过 npm 安装 n: $ npm install -g n 查看当前 node 版本: $ node -v v4.2.4 通过 n 安装指定版本: $ n 4.4.4 install : node-v4.4.4 mkdir : /opt/node/n/versions/node/4.4.4 fetch : https://

  • JavaScript1.6数组新特性介绍以及JQuery的几个工具方法

    JavaScript 1.6 引入了几个新的Array 方法,具体的介绍见:New in JavaScript 1.6 .这些方法已经被写进了ECMA262 V5.现代浏览器(IE9/Firefox/Safari/Chrome/Opera)都已经支持,但IE6/7/8不支持.jquery的工具方法中提供了类似的功能. 1.Array.forEach()和jquery的$().each().在数组中的每个项上运行一个函数.类似java5 增强的for循环. 复制代码 代码如下: var ary =

  • 将nodejs打包工具整合到鼠标右键的方法

    打包用到的批处理文件代码如下: 复制代码 代码如下: @echo offtitle Builder - 正在合并 ... color 03REM =====================================REM     jsbuilder beta版REMREM =====================================SETLOCAL ENABLEEXTENSIONS echo. REM 过滤文件后缀,只combo js文件if "%~x1" NEQ

随机推荐