Minify把CSS和JS压缩和削减

Minify把CSS和JS压缩和削减(Minify:去掉空格回车符等),以及把多个CSS,JS文件整合到一个文件里。不要以为你的大带宽没有必要进行这类优化。使用它的理由更重要的是文件合并,而不是压缩,而是文件整合,这样可以减少浏览器端不断发出新的连接请求,就像FTP服务器一样,多个小文件和一个大文件耗时是不一样的。

Minify是用PHP写的,项目地址 http://code.google.com/p/minify/

安 装 
   1. 下载最新的Minify然后解压缩到minify目录。 
   2. 复制"min"目录到你的DOCUMENT_ROOT.

基本用法 
假设你有http://localhost/a.js,http://localhost/b.js两个文件。那么现在,你可以使用http://localhost/min/?f=a.js,b.js,看看浏览器返回结果,是不是minify的两个js文件的内容?

附译min目录下的README.txt

引用

该目录中的文件包含默认Minify设置,旨在简化整合您的网站。Minify将合并削减JavaScript或CSS文件,并进行HTTP压缩和缓存头。

推 荐 
建议修改config.php中设置$min_cachePath到一个PHP可写目录。这将提高性能。

GETTING STARTED 
最快的开始Minify的方法是使用Minify Builder应用程序的URI 
访问您的网站:http://example.com/min/builder/

压缩单个文件 
比方说,你要服务于这个文件: 
  http://example.com/wp-content/themes/default/default.css 
下面是“Minify网址”该文件: 
  http://example.com/min/?f=wp-content/themes/default/default.css

换句话说,“f”参数设置为从WEB根路径下的目标文件(不需要路径/)”。由于CSS文件可能包含相对URI,Minify会自动通过重写机制找到它们。

合并多个文件到一个文件下载 
用‘,‘分隔f参数的每一个文件名。 
比如,有如下CSS文件: 
  http://example.com/scripts/jquery-1.2.6.js 
  http://example.com/scripts/site.js 
您可以通过Minify结合起来: 
  http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js

简化基本路径 
如果你合并的文件共享同一父目录,你可以使用b参数设置的f参数的基本目录(同样不包括前导或者后缀/字符)。 
例如,以下两种写法效果相同: 
  http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js 
  http://example.com/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js

在Html中使用MINIFY 
在(X)HTML文件,不要忘记将&替换为&

指定允许的目录 
默认情况下,Minify不会有任何DOCUMENT_ROOT范围内的*.css/*.js文件。如果你希望限制Minify存取某些目录,在config.php中设置 
$min_serveOptions [‘minApp‘] [‘allowDirs‘]数组。例如:限制到/js和/themes/default目录,使用:

  1. $min_serveOptions[‘minApp‘][‘allowDirs‘] = array(‘//js‘, ‘//themes/default‘);

"组":更快的性能和更好的网址 
为了获得最佳性能,编辑groupsConfig.php中的预指定文件组,下面是一个例子配置:

  1. return array(
  2. ‘js‘ => array(‘//js/Class.js‘, ‘//js/email.js‘)
  3. );

以上预指定js将结果是合并了如下文件: 
  http://example.com/js/Class.js 
  http://example.com/js/email.js 
现在,您可以如此简化URL: 
  http://example.com/min/?g=js 
  
组:指定document_root目录以外的文件 
在groupsConfig.php阵中,//是指向DOCUMENT_ROOT,但你也可以指定从系统的绝对目录路径或相对于document_root的相对目录:

  1. return array(
  2. ‘js‘ => array(
  3. ‘//js/file.js‘            // file within DOC_ROOT
  4. ,‘//../file.js‘           // file in parent directory of DOC_ROOT
  5. ,‘C:/Users/Steve/file.js‘ // file anywhere on filesystem
  6. )
  7. );

未来过期HTTP头 
Minify可以发送未来(一年)过期HTTP头。要启用该功能,您必须添加一个数字到URIs(例如/min/?g=js&1234 or /min/f=file.js&1234),每当源文件修改时改变该数字。如果你使用SVN/CVS,你可以考虑使用修订版号作为该数字。

如果使用"组"来合并压缩你的文件,可以使用工具函数Minify_groupUri()来得到一个“版本”的URI。例如:

  1. <?php
  2. // 之前确保min/lib目录设置到include_path
  3. // add /min/lib to your include_path first!
  4. require $_SERVER[‘DOCUMENT_ROOT‘] . ‘/min/utils.php‘;
  5. $jsUri = Minify_groupUri(‘js‘);
  6. echo "<script type=‘text/javascript‘ src=‘{$jsUri}‘></script>";

调试模式 
在调试模式下,Minify不压缩文件,而是发送合并后的带有行号的文件。要启用该模式,在config.php中设置为$min_allowDebugFlag为true,并增加"&debug=1" 到你的URIs. 
例如:/min/?f=script1.js,script2.js&debug=1

注:对于该模式,注释风格的字符串正则表达式可能会导致问题。

把min目录上传根目录,根目录打开http://example.com/min/

Note: Please set $min_cachePath in /min/config.php to improve performance.

设置/min/config.php文件  ,$min_cachePath 有3个选择。

//$min_cachePath = ‘c://WINDOWS//Temp’;
//$min_cachePath = ‘/tmp’;
//$min_cachePath = preg_replace(‘/^//d+;/’, ”, session_save_path());

选择第2个,去除//  .设置tmp属性777

在显示的界面中加入你想合并压缩的 js/css 路径,点击 ‘Update’ 之后会为你生成一个 url,如:http://localhost/min/b=googletesting/js& f=mootools.js,iAction.js,iAjax.js,global.js

css和JS分别合并,2个地址。如果需要组合的文件很多,url 就会变得很长,Minify 支持 group,可以将这些文件分组,这样 url 中只需指定 g=group名字 就可以了。

安装完毕后删除min/builder/index.php  文件。防止其他人登陆!后期如需编辑再次上传!

时间: 2024-10-22 16:11:28

Minify把CSS和JS压缩和削减的相关文章

Django 的css和js压缩插件:django_compressor

今天尝试了django_conpressor,一个在django框架中压缩css和js的插件,灰常有用 我把它加载在我的base的HTML template中,原来未经压缩的css和js是: <link rel="stylesheet" href = "include/style.css" type="text/css"> <link rel="stylesheet" href = "include

Node.js压缩web项目中的js,css和图片

安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功 安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是npm install xxx ,我之前安装都是不适于全局安装的,这个应该无所谓 编写压缩的js(应该很好看懂) /*******压缩JS******/ var fs = require('fs'); var uglify = require("../../nodejs/node_modules/u

gulp之css,js压缩合并加密替换

为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然,这里还有个附加的需要就是,静态资源需要自行优化(压缩合并). 下面是我gulpfile.js的代码: var gulp = require('gulp'), //基础库 clean = require('gulp-clean'), //清空文件夹 minify = require('gulp-mi

区域及分离、Js压缩、css、jquery扩展

后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱佛脚.深圳最近的天气反常,许多人感冒了,我也成为其中之一,大家注意身体... 这一篇,我来简单的讲一下接下来项目中会用到的一些杂七杂八的技术. 区域及分离 在15.ASP.NET MVC入门到精通——MVC-路由中,我已经简要说明了区域的分离.

26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱佛脚.深圳最近的天气反常,许多人感冒了,我也成为其中之一,大家注意身体... 这一篇,我来简单的讲一下接下来项目中会用到的一些杂七杂八的技术. 区域及分离 在15.ASP.NET MVC入门到精通——MVC-路由中,我已经简要说明了区域的分离. 1.右键单击Web项目,“添加”——“区域”,区域名,

配置grunt进行css、js的检查、合并和压缩

现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是  http://www.gruntjs.net 这是个中文网站,有文档可以参考.但是只看文档是不是觉得很蛋疼呢?一个字:看不太懂啊! 好了,废话不多说,直接发安装步骤和注意事项,都是心酸研究出来的啊... 这里介绍mac的安装方法.windows方法相类似,等我稍微研究一下后再发上来 首先,要安装nodejs,grunt是依赖node滴.上 www.nodejs.or

实际项目中,为什么多个css、js文件要实现合并与压缩?(了解了这你才算入门)

Web性能优化最佳实践中最重要的一条是减少HTTP请求.而减少HTTP请求的最主要的方式就是,合并并压缩JavaScript和CSS文件. 关于编写css时,我们应注意通过一些细节来控制css文件的大小,比如:全局样式.继承样式.缩写样式,空格.注释等:同时你也可以通过在线工具对你的css文件进行压缩,来减少css文件的大小,但压缩后的css文件在可维护性.识别性方面变的特别弱.但更复杂的情况是,如果你的页面里面引用了多个css.多个js文件时就可能处理不好. 多个css.多个js文件进行自动合

关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js

网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根目录的,先下载解压好待用 npm解压包百度云下载地址:http://pan.baidu.com/s/1bpdnmGZ (yuicompressor-2.4.2.jar 这个是WB配置让CSS或者JS自动生成.mincss/.minjs的压缩工具,不是配置LESS的工具哦, 使用很简单不用解压,比我直

grunt——合并压缩css和js

npm文档:www.npmjs.com [GruntFile.js] module.exports = function(grunt) { grunt.initConfig({ timestamp:'<%= grunt.template.today("yyyymmddHHMM") %>', jspath:'app/js/', csspath:'app/css/', concat: { js:{ options: { separator: ';' }, src: [ &quo