如何在linux命令行下使用YUI来压缩CSS以及JavaScript文件

Tags: linux shell

当应用部署到服务器上后,为了加快JS/CSS文件的访问速度,我需要在没有GUI的服务器环境上最小化和压缩这些文件。我如何才能在Linux或 者Unix-like操作系统的命令行下完成最小化(Minify)和压缩(Compress)我的CSS以及JavaScript文件呢?

可以使用"YUI Compressor"工具,它是广泛使用的JavaScript和StyleSheet文件压缩工具,下面的信息来自项目主页:

YUI Compresson是JavaScript最小化工具,相对于其他工具它可以在100%安全的前提下获得最高的压缩效果。通过对YUI Library的测试结果显示,它的压缩效果比JSMin提高了20%(经过HTTP压缩后变成10%),通过使用isaa Schlueter的依据正则表达式的CSS压缩器YUI也可以压缩CSS文件。

步骤1:在Linux上安装Java

YUI Compressor需要Java才能运行,因此需要在Linux或Unix系统上安装JDK(参考你所使用的Linux发行版相关手册)。安装完成后使用下面的命令来验证安装情况:

whereis java
which java
java -version

image here

然后,设置在启动脚本中(~/.bash_profile或者~/.profile)JAVA_HOME环境变量,比如:

export JAVA_HOME="/usr/lib/jvm/jre-1.7.0-openjdk.x86_64"

步骤2:安装YUI Compressor

使用下面的wget命令来安装YUI Compressor的最新版本:

$ mkdir -p $HOME/yuicompressor
$ cd !!:$
$ wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar

步骤3:运行YUI Compressor

使用下面的命令来运行YUI Compressor

$ java -jar yuicompressor-2.4.8.jar

输出示例:

YUICompressor Version: 2.4.8

Usage: java -jar yuicompressor-2.4.8.jar [options] [input file]

Global Options
  -V, --version             Print version information
  -h, --help                Displays this information
  --type <js|css>           Specifies the type of the input file
  --charset <charset>       Read the input file using <charset>
  --line-break <column>     Insert a line break after the specified column number
  -v, --verbose             Display informational messages and warnings
  -o <file>                 Place the output into <file>. Defaults to stdout.
                            Multiple files can be processed using the following syntax:
                            java -jar yuicompressor.jar -o '.css$:-min.css' *.css
                            java -jar yuicompressor.jar -o '.js$:-min.js' *.js

JavaScript Options
  --nomunge                 Minify only, do not obfuscate
  --preserve-semi           Preserve all semicolons
  --disable-optimizations   Disable all micro optimizations

If no input file is specified, it defaults to stdin. In this case, the 'type'
option is required. Otherwise, the 'type' option is required only if the input
file extension is neither 'js' nor 'css'.

示例:压缩和最小化CSS文件

在这个例子中,我们将通过压缩style.css来缩小文件大小,使文件加载更快,我当前的文件大小:

$ ls -l style.css

输出:

-rw-r--r--. 1 vivek vivek 46909 Jan 11 21:33 style.css

使用命令调用YUI Compressor进行压缩:

$ java -jar yuicompressor-2.4.8.jar --type css style.css > mini_style.css

或者:

$ java -jar yuicompressor-2.4.8.jar --type css -o mini_style.css style.css

命令完成后,通过下面命令来查看压缩后文件大小:

$ ls -l mini_style.css

输出:

-rw-r--r--. 1 vivek vivek 36576 Jan 11 21:33 mini_style.css

下面是一个简单的bash循环,可以压缩多个CSS文件:

for i in ie.css style.css tutorial.css social.css
do
  java -jar yuicompressor-2.4.8.jar --type css -o "mini_$i" "$i"
done

示例:压缩Javascript文件

命令如下:

$ java -jar yuicompressor-2.4.8.jar --type js nixcraft.js > mini_nixcraft.js

或者:

$ java -jar yuicompressor-2.4.8.jar --type js -o mini_nixcraft.js nixcraft.js

同样,下面是一个简单的bash循环,用来压缩多个文件:

for i in nixcraft.js ads.js demo.js ui.js
do
  java -jar yuicompressor-2.4.8.jar --type js -o "mini_$i" "$i"
done

怎么样,是不是很简单!

参考:

YUI Compressor下载地址

Oracle Java JDK for Linux/Unix

本文链接:http://www.4byte.cn/learning/1818/ru-he-zai-linux-ming-ling-xing-xia-shi-yong-yui-lai-ya-suo-css-yi-ji-javascript-wen-jian.html