利用nginx concat模块合并js css

前言：

nginx-http-concat模块是由淘宝网开发的，现在淘宝网合并js和css正是用这个模块，如链接http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js,p/global/1.0/global-min.js,p/fp/2012/core.js,p/fp/2012/fp/module.js,p/fp/2012/fp/util.js,p/fp/2012/fp/directpromo.js?t=2012080620120924.js就是合并了kissy-min.js、global-min.js、core.js、module.js、util.js，directpromo.js等js文件。

 

环境：

Ubuntu 15.04 64位

 

步骤：

一、环境准备

安装Nginx之前要先准备好Ubuntu 15的环境，安装好Ubuntu系统之后，还需要安装以下组件：

1、apt-get install openssh-server

Windows用XShell连接，Mac 用自带的Terminal连接

2、sudo apt-get install libssl-dev

3、sudo apt-get install build-essential

编译Nginx和Nginx concat用到

4、sudo apt-get install vim

Linux下强大的编辑器

5、sudo apt-get install git

安装Git用于获取Nginx concat包

6、sudo apt-get install libpcre3 libpcre3-dev

安装Perl库，编译Nginx用到

7、sudo apt-get install curl libcurl3 libcurl3-dev php5-curl

测试Nginx页面

 

二、安装Nginx

1、下载Nginx

http://nginx.org/download/

mkdir /usr/local/Nginx
cd /usr/local/Nginx
wget http://nginx.org/download/nginx-1.9.9.tar.gz
tar zxvf nginx-1.9.9.tar.gz

 

2、下载nginx-http-concat

git clone https://github.com/idefav/nginx-http-concat
mv nginx-http-concat /usr/local/src

 

三、编译

cd ./nginx-1.9.9
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --add-module=/usr/local/src/nginx-http-concat
make && make install

 

四、配置

打开配置文件

vim /usr/local/nginx/conf/nginx.conf

 

1、CSS

location /static/css/ {
    concat on;
    concat_types text/css;
    concat_max_files 20;
}

2、JS

location /static/js/ {
    concat on;
    concat_types application/javascript;
    concat_max_files 30; 
}

3、混合

location /static/all/ {
    concat on;
    concat_types text/css application/javascript;
    concat_max_files 20;
    concat_unique off;
}

 

五、启动Nginx

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

 

六、测试

curl http://localhost/static/??jquery.js,jquery.corner.js

 

七、开启Gzip

配置Gzip

gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary off;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/javascript;
    gzip_comp_level 2;

    重启Nginx

/usr/local/nginx/sbin/nginx -s reload

　　测试

/usr/local/nginx# curl -I -H "Accept-Encoding: gzip, deflate"  http://192.168.19.128/static/??jquery.js,jquery.corner.js