找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1499|回复: 0
打印 上一主题 下一主题

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

[复制链接]

2500

主题

2513

帖子

7520

积分

论坛元老

Rank: 8Rank: 8

积分
7520
跳转到指定楼层
楼主
发表于 2018-2-14 05:58:17 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

            一、实现合并和压缩多个JS和CSS文件的代码
HTML:
[U]复制代码[/U] 代码如下:
PHP:
[U]复制代码[/U] 代码如下:
//输出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参数
[U]复制代码[/U] 代码如下:
return array(
  // 'js' => array('//js/file1.js', '//js/file2.js'),
  // 'css' => array('//css/file1.css', '//css/file2.css'),
);
3、在网页中按照如下方式引用就可以了:
后面的数字可以用更新日期来作标志,"min"和步骤1里的名称对应。
4、性能优化,请参考code.google.com/p/minify/wiki/CookBook
注意:
1、需要将httpd.conf里的rewrite_module模块开启
2、开发过程中,可以将调试模式开启,开发完毕后再将调试模式关闭,可以利用火狐浏览器的firebug来查看
[U]复制代码[/U] 代码如下:
$min_allowDebugFlag = true
            
            
您可能感兴趣的文章:
  • 解决http://16a.us/2.js之arp欺骗的方法附专杀工具
  • 一款js和css代码压缩工具[附JAVA环境配置方法]
  • 常用Extjs工具:Extjs.util.Format使用方法
  • js工具方法弹出蒙版
  • 将nodejs打包工具整合到鼠标右键的方法
  • JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
  • js调试工具console.log()方法查看js代码的执行情况
  • js实现带关闭按钮始终显示在网页最底部工具条的方法
  • node.js版本管理工具n无效的原理和解决方法
  • Angular工具方法学习
            
  • 分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    用户反馈
    客户端