使用yuicompressor 压缩js, CSS

使用yuicompressor 压缩js, CSS

前言

保持web页面的轻量级,提高网页工程设计提升web应用程序的性能永远是一个主要策略。但是,还是有一些其他的辅助策略提升系统系统,像压缩代码, HTTP压缩传输 和使用CSS 精灵等。

压缩代码,广泛使用的工具有  JSMIN, the Dojo compressor 和 Packer. 但是这些工具, 或多或少存在着一些缺陷。 比如, JSMIN, 没有产生最佳的压缩效果(由于其简单的算法,它必须留在代码中的许多换行符为了不引入任何新的bug)。

YUI Compressor 可以用来压缩 JS 代码, 同样可以结合Isaac Schlueter’s 正则表示是来压缩CSS文件。

下载页面:

https://github.com/yui/yuicompressor/tree/v2.4.8

也可以到 https://skydrive.live.com/redir?resid=5B4EDBCD9EF1AB6B!185&authkey=!AOVPj4qZ5MENcMI&ithint=file%2c.zip  下载

YUI Compressor 是怎么工作的?

YUI Compressor 是用Java编写的(版本>=1.4) , 使用 Rhino 来产生JavaScrip 文件。它先分析javascript 源文件,理解其结果,打印出标识流,省略尽可能多的空白字符,只要合适就使用 1(或2或3)这样的字符来代替本地符号。(对于像eval 或 with 这样一些邪恶的功能, 使用保守的方法不至于混淆含有这些语句的作用域)。CSS的压缩算法使用一组微调正则表达式来压缩源CSS文件。

在命令行方式使用YUI Compressor

在以上下载地址下载的是YUI Compressor 的源代码。首先要把它打包成 jar 档。

将下载的zip  解压。cmd 到目录下。

执行ant , 就产生 .jar 档了。

有了jar 档,就可以对js 或CSS  文件进行压缩了。

举个例子, 要压缩 ext-all.js 这个文件, 只需要执行命令:

java -jar yuicompressor-2.4.8.jar ext-all.js -o ext-all-min.js

具体的使用语法:

java -jar yuicompressor-x.y.z.jar
Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

  Global Options
    -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 &lt;file&gt;                 Place the output into <file> or a file pattern.
                              Defaults to stdout.

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

GLOBAL OPTIONS

  -h, --help
      Prints help on how to use the YUI Compressor

  --line-break
      Some source control tools don't like files containing lines longer than,
      say 8000 characters. The linebreak option is used in that case to split
      long lines after a specific column. It can also be used to make the code
      more readable, easier to debug (especially with the MS Script Debugger)
      Specify 0 to get a line break after each semi-colon in JavaScript, and
      after each rule in CSS.

  --type js|css
      The type of compressor (JavaScript or CSS) is chosen based on the
      extension of the input file name (.js or .css) This option is required
      if no input file has been specified. Otherwise, this option is only
      required if the input file extension is neither 'js' nor 'css'.

  --charset character-set
      If a supported character set is specified, the YUI Compressor will use it
      to read the input file. Otherwise, it will assume that the platform's
      default character set is being used. The output file is encoded using
      the same character set.

  -o outfile

      Place output in file outfile. If not specified, the YUI Compressor will
      default to the standard output, which you can redirect to a file.
      Supports a filter syntax for expressing the output pattern when there are
      multiple input files.  ex:
          java -jar yuicompressor.jar -o '.css$:-min.css' *.css
      ... will minify all .css files and save them as -min.css

  -v, --verbose
      Display informational messages and warnings.

JAVASCRIPT ONLY OPTIONS

  --nomunge
      Minify only. Do not obfuscate local symbols.

  --preserve-semi
      Preserve unnecessary semicolons (such as right before a '}') This option
      is useful when compressed code has to be run through JSLint (which is the
      case of YUI for example)

  --disable-optimizations
      Disable all the built-in micro optimizations

字符编码是比较常用的参数:

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8

其他注意事项:

1. 可以使用 -v 参数, 虽然不能完全替代 JSLint         的功能,但当代码有错误时可以输出一些有用的信息。
2. 如果你想在后端而不是在构建时压缩文件, 你可能想缓存缩小的文件在内存中以提高性能。 YUI Compressor 可以很容易被实例化并使用在java 环境中。

http://yui.github.io/yuicompressor/

使用yuicompressor 压缩js, CSS

相关文章:

你感兴趣的文章:

标签云: