nginx+php+minify 压缩你的css、js 详解

Minify 用于服务器端的JavaScript 和 CSS的合并压缩。

1. 首先从 Google code下载 Minify

http://code.google.com/p/minify/wiki/UserGuide 

2. 上传至网站根目录下，当然，也可以你所指定的位置，但是需要注意的是需要修改Minify。

3. 修改Nginx配置，可以参见我前面的文章：

Minify在Nginx上的rewrite配置 

 P.S. 添加重定向目的在于合并压缩后的js和css代码路径不携带?

 

4.  修改Minify配置文件

 

 <?php

 /**

  * Configuration for default Minify application

  * @package Minify

  */





 /**

  * In 'debug' mode, Minify can combine fileswith no minification and

  * add comments to indicate line #s of theoriginal files.

  *

  * To allow debugging, set this option to trueand add "&debug=1" to

  * a URI. E.g./min/?f=script1.js,script2.js&debug=1

  */

 $min_allowDebugFlag= false;





 /**

  * Set to true to log messages to FirePHP(Firefox Firebug addon).

  * Set to false for no error logging (Minifymay be slightly faster).

  * @link http://www.firephp.org/

  *

  * If you want to use a custom error logger,set this to your logger

  * instance. Your object should have a methodlog(string $message).

  *

  * @todo cache system does not have errorlogging yet.

  */

 $min_errorLogger =false;





 /**

  * Allow use of the Minify URI Builder app. Ifyou no longer need

  * this, set to false.

  **/

 $min_enableBuilder =true;





 /**

  * For best performance, specify your tempdirectory here. Otherwise Minify

  * will have to load extra code to guess. Someexamples below:

  */

 //$min_cachePath ='c:\\WINDOWS\\Temp';

 $min_cachePath= '/tmp';

 //$min_cachePath =preg_replace('/^\\d+;/', '', session_save_path());





 /**

  * Leave an empty string to use PHP's$_SERVER['DOCUMENT_ROOT'].

  *

  * On some servers, this value may bemisconfigured or missing. If so, set this

  * to your full document root path with notrailing slash.

  * E.g. '/home/accountname/public_html' or'c:\\xampp\\htdocs'

  *

  * If /min/ is directly inside your documentroot, just uncomment the

  * second line. The third line might work onsome Apache servers.

  */

 $min_documentRoot= '';

 //$min_documentRoot =substr(__FILE__, 0, strlen(__FILE__) - 15);

 //$min_documentRoot =$_SERVER['SUBDOMAIN_DOCUMENT_ROOT'];

 //$min_documentRoot ='/var/www/cychai/Cache/';





 /**

  * Cache file locking. Set to false iffilesystem is NFS. On at least one

  * NFS system flock-ing attempts stalled PHPfor 30 seconds!

  */

 $min_cacheFileLocking= true;





 /**

  * Combining multiple CSS files can place@import declarations after rules, which

  * is invalid. Minify will attempt to detectwhen this happens and place a

  * warning comment at the top of the CSSoutput. To resolve this you can either

  * move the @imports within your CSS files, orenable this option, which will

  * move all @imports to the top of the output.Note that moving @imports could

  * affect CSS values (which is why this optionis disabled by default).

  */

 $min_serveOptions['bubbleCssImports']= false;





 /**

  * Maximum age of browser cache in seconds.After this period, the browser

  * will send another conditional GET. Use alonger period for lower traffic

  * but you may want to shorten this beforemaking changes if it's crucial

  * those changes are seen immediately.

  *

  * Note: Despite this setting, if you include anumber at the end of the

  * querystring, maxAge will be set to one year.E.g. /min/f=hello.css&123456

  */

 $min_serveOptions['maxAge']= 315360000;





 /**

  * If you'd like to restrict the "f"option to files within/below

  * particular directories below DOCUMENT_ROOT,set this here.

  * You will still need to include the directoryin the

  * f or b GET parameters.

  *

  * // = shortcut for DOCUMENT_ROOT

  */

 //$min_serveOptions['minApp']['allowDirs']= array('//js', '//css');



 /**

  * Set to true to disable the "f" GETparameter for specifying files.

  * Only the "g" parameter will beconsidered.

  */

 $min_serveOptions['minApp']['groupsOnly']= false;



 /**

  * Maximum # of files that can be specified inthe "f" GET parameter

  */

 $min_serveOptions['minApp']['maxFiles']= 50;





 /**

  * If you minify CSS files stored in symlink-eddirectories, the URI rewriting

  * algorithm can fail. To prevent this, providean array of link paths to

  * target paths, where the link paths arewithin the document root.

  *

  * Because paths need to be normalized for thisto work, use "//" to substitute

  * the doc root in the link paths (the arraykeys). E.g.:

  * <code>

  * array('//symlink' => '/real/target/path')// unix

  * array('//static' =>'D:\\staticStorage')  // Windows

  * </code>

  */

 $min_symlinks =array();





 /**

  * If you upload files from Windows to anon-Windows server, Windows may report

  * incorrect mtimes for the files. This maycause Minify to keep serving stale

  * cache files when source file changes aremade too frequently (e.g. more than

  * once an hour).

  *

  * Immediately after modifying and uploading afile, use the touch command to

  * update the mtime on the server. If the mtimejumps ahead by a number of hours,

  * set this variable to that number. If themtime moves back, this should not be

  * needed.

  *

  * In the Windows SFTP client WinSCP, there'san option that may fix this

  * issue without changing the variable below.Under login > environment,

  * select the option "Adjust remotetimestamp with DST".

  * @linkhttp://winscp.net/eng/docs/ui_login_environment#daylight_saving_time

  */

 $min_uploaderHoursBehind= 0;





 /**

  * Path to Minify's lib folder. If you happento move it, change

  * this accordingly.

  */

 $min_libPath =dirname(__FILE__) . '/lib';





 // try to disableoutput_compression (may not have an effect)

 ini_set('zlib.output_compression','0');

5. 重启Nginx服务。

6. 使用Minify其它页面的JavaScript文件，src地址格式为 /min/f=js/[javascript文件名]

 

如：

<scripttype="text/javascript" src="/min/f=js/common.js"></script>

 

对于合并多个JavaScript文件，可以通过Minify服务进行合并：

开发环境访问地址：

http://localhost/min/builder/

填写需要合并的JavaScript文件，Update后，会生成请求的URI地址，在相应页面引用即可。

参考：

在服务端合并和压缩JavaScript和CSS文件

Minify优化网站:合并多个CSS或者js文件

更多配置CookBook： http://code.google.com/p/minify/wiki/CookBook 

二

前提：服务器上nginx和php都已经装了，所以要做两步工作：让nginx支持php和安装minify。

1.让nginx支持php

安装php5-fpm：

ubuntu有的版本是没有php-fpm的源的，所以要把它加到apt的源里面

 sudo vi /etc/apt/source.list

 deb http://ppa.launchpad.net/jdub/devel/ubuntu maverick main
 deb http://ppa.launchpad.net/brianmercer/php/ubuntu lucid main
 deb-src http://ppa.launchpad.net/brianmercer/php/ubuntu lucid main

安装

 sudo apt-get update
 sudo apt-get install php5-fpm

启动

 sudo /etc/init.d/php5-fpm start

然后是修改nginx的配置文件：

/etc/nginx/fastcgi_params

加入这行（有的nginx已经有了，就不用加了）：

 fastcgi_param   SCRIPT_FILENAME         $document_root$fastcgi_script_name;

在你的某个要用的虚拟主机里面加入以下代码，我的是/etc/nginx/conf.d/mysite.conf

 location ~ \.php$ {
                 fastcgi_pass 127.0.0.1:9000;
                 fastcgi_index index.php;
                 include /etc/nginx/fastcgi_params;
         }

然后重启nginx，就可以了。

可以在你的网站根目录放个phpinfo的文件，验证以下nginx支持php是否成功：

info.php

 <?php
 // Show all information, defaults to INFO_ALL
 phpinfo();
 ?>

2.安装minify

这一步就很简单了，minify已经加入google code，到它的google code主页就能下载：http://code.google.com/p/minify/

下载地址：http://minify.googlecode.com/files/minify_2.1.4_beta.zip

然后解压缩，把其中的min目录放到你的网站根目录就可以了

3.minify简单使用说明

这个网上资料很多，一般这样访问你的css，假如你有个css：http://www.abc.com/style/global.css，那么你应该这样访问：

 http://www.abc.com/min/index.php?f=/style/global.css

"f="后面的地址才是你的真实文件路径

但是配合nginx可以改进一下，把这条rewrite规则加到nginx的配置文件中：

 location / {

                 rewrite ^/min/([a-z]=.*) /min/index.php?$1 last;
 ......
         }

然后你可以这样访问了：

 http://www.abc.com/min/f=/style/global.css

 http://www.abc.com/min/f=/style/global.css,/style/index.css,/css/abc.css