在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