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

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

1. 首先从 Google code下载 Minify

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

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

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

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

4. 修改Minify配置文件

 
    [php]  
    view plain 
    copy 
     
 <?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的源里面

 
   [html]  
   view plain 
   copy 
    
  
 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  

安装

 
   [html]  
   view plain 
   copy 
    
  
 sudo apt-get update  
 sudo apt-get install php5-fpm  

启动

 
   [html]  
   view plain 
   copy 
    
 sudo /etc/init.d/php5-fpm start

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

/etc/nginx/fastcgi_params

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

 
   [html]  
   view plain 
   copy 
    
 fastcgi_param   SCRIPT_FILENAME         $document_root$fastcgi_script_name;

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

 
   [html]  
   view plain 
   copy 
    
  
 location ~ \.php$ {  
                 fastcgi_pass 127.0.0.1:9000;  
                 fastcgi_index index.php;  
                 include /etc/nginx/fastcgi_params;  
         }  

然后重启nginx，就可以了。

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

info.php

 
   [html]  
   view plain 
   copy 
    
  
 <?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，那么你应该这样访问：

 
   [html]  
   view plain 
   copy 
    
 http://www.abc.com/min/index.php?f=/style/global.css

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

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

 
   [html]  
   view plain 
   copy 
    
  
 location / {  
   
                 rewrite ^/min/([a-z]=.*) /min/index.php?$1 last;  
 ......  
         }  

然后你可以这样访问了：

 
   [html]  
   view plain 
   copy 
    
 http://www.abc.com/min/f=/style/global.css

 
   [html]  
   view plain 
   copy 
    
 http://www.abc.com/min/f=/style/global.css,/style/index.css,/css/abc.css

秒客网

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

相关文章