在Linux/Unix Shell提示符下压缩和压缩CSS和Javascript文件

时间:2020-01-09 10:42:17  来源:igfitidea点击:

如何使用服务器上的shell提示最小化和压缩Linux或者类Unix系统上的CSS和JS文件?
如何在shell提示符下缩小JavaScript和样式表,以便它们可以在不使用任何在线工具的情况下通过Internet更快地下载?
您需要使用YUI Compressor工具。
它广泛用于缩小JavaScript和样式表。

YUI压缩器是一种JavaScript压缩器,除了删除注释和空格外,还使用最小的变量名来混淆局部变量。
这种混淆是安全的,即使在使用诸如eval或者的构造时(尽管在那些情况下压缩不是最佳的),与jsmin相比,平均节省了大约20%。

YUI Compressor也能够安全地压缩CSS文件。
关于使用哪个压缩器的决定取决于文件扩展名(js或者css)

步骤1.在Linux或者Unix系统上安装JAVA

您需要JAVA来运行yuicompressor

在系统上安装Java之后,请确保您可以使用以下命令查看JDK信息:

whereis java
which java
java -version

另外,请确保在shell启动文件中为JAVA_HOME设置了正确的路径。
例如:

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

步骤2:在Linux和类Unix系统上安装yuicompressor

执行以下wget命令以下载最新版本的yuicompressor:

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

如何运行yuicompressor?

输入以下命令以直接运行yuicompressor:

$ 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 Hyman Hyman 46909 Jan 11 21:33 style.css

接下来,使用命令直接调用yuicompressor:

$ 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

再次,列出缩小/压缩的css文件,并借助ls命令记下文件大小:

$ ls -l mini_style.css

输出示例:

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

这是bash for循环,用于压缩多个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 theitroad.js > mini_theitroad.js

或者

$ java -jar yuicompressor-2.4.8.jar --type js -o mini_theitroad.js theitroad.js

这是bash for循环,用于压缩js文件:

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