有米啦

前端 分享 交流

2009-11-09

google发行了他们的javascript开发工具Closure Tools

栏目：css+xhtml , javascript      412 views      尚无回复

11月6日google发行了他们的javascript开发工具Closure Tools

作者：yapollo.li@gmail.com

今日我在http://code.google.com/中发现了google已经发行了

Closure Tools (Labs)

闭包工具～

这个closure tools包含3个工具~
1，javascript 优化工具~
2，一个综合的javascript库
3，一个简单的java和javascript的模版系统~

下面我会依次介绍这三个工具的功能和他们的优点，及如何使用他们~

首先是javascript优化工具：
做前端开发的同学，一定对jsmini和csstidy ，以及yuicompressor
十分熟悉哦~

但是google的这个Closure Compiler 你一定没有用过~或者没听过~
说实在的它和jsmin和yuicompressor一样都是减少js 载入时间，减少带宽成本滴~工具~
但是google的closure要比另外两个强大~，目前我心中的3个排序是1.Closure Compiler 2 yuicompressor 3.jsmin

以下是google code对closure Compiler 的简介~

A JavaScript optimizer

The Closure Compiler compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites and minimizes what’s left so that it downloads and runs quickly. It also also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. These checks and optimizations help you write apps that are less buggy and easier to maintain. You can use the compiler with Closure Inspector, a Firebug extension that makes debugging the obfuscated code almost as easy as debugging the human-readable source.

从上面的描述中我们知道它还有个一个firefox的基于firebug的插件Closure Inspector，不仅能提供语法的检测，还能调试做了混淆的代码，并且定位映射到可读性强的源代码中。

下面我们就来详细介绍下closure Compiler

Closure Compiler Service UI

1，试用下官方的online版的js 优化工具~ 【Closure Compiler Service UI】
网址：http://closure-compiler.appspot.com
以下是界面截图~

demo

注意：这个在线版的生成mini文件的工具，被生成的文件只在服务器上保留1小时。1小时后自动删除~

另外为了防止滥用，如果你重复编译的次数过多，会被停止服务，提示“Too many compiles performed recently. Try again later” ，你可以过一段时间后再用。

参考：Getting Started with the Closure Compiler Service UI

2.Closure Compiler Service API

我们可以自己做个Closure Compiler Service 的api

<html>
  <body>
    <form action="http://closure-compiler.appspot.com/compile" method="POST">
    <p>Type JavaScript code to optimize here:</p>
    <textarea name="js_code" cols="50" rows="5">
    function hello(name) {
      // Greets the user
      alert('Hello, ' + name);
    }
    hello('New user');
    </textarea>
    <input type="hidden" name="compilation_level" value="WHITESPACE_ONLY">
    <input type="hidden" name="output_format" value="text">
    <input type="hidden" name="output_info" value="compiled_code">
    <br><br>
    <input type="submit" value="Optimize">
    </form>
  </body>
</html>

1

关于api的一些参数设置，大家可以参考这里

3. Closure Compiler Application
一个基于java命令行的压缩 、优化、纠错的一个工具

  1. Download the Closure Compiler packageCreate a working directory called closure-compiler.Download the Closure Compiler compiler.jar file and save it in closure-compiler.
  2. Create a JavaScript fileCreate a file named hello.js containing the following JavaScript: 
    // A simple function.
function hello(longName) {
  alert('Hello, ' + longName);
}
hello('New User');

    Save this file in the closure-compiler directory.

  3. Compile the JavaScript fileRun the following command from the closure-compiler directory: 
    java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

    This command creates a new file called hello-compiled.js, which contains the following JavaScript:

    function hello(a){alert("Hello, "+a)}hello("New User");

    Note that the compiler has stripped comments, whitespace and an unnecessary semi-colon. The compiler has also replaced the parameter name longName with the shorter name a. The result is a much smaller JavaScript file.

    To confirm that the compiled JavaScript code still works correctly, include hello-compiled.js in an HTML file like this one:

    <html>
<head><title>Hello World</title></head>
<body>
<script src="hello-compiled.js"></script>
</body>
</html>

    Load the HTML file in a browser, and you should see a friendly greeting!

Next Steps

This example illustrates only the most simple optimizations performed by the Closure Compiler. To learn more about the compiler’s capabilities, read Advanced Compilation and Externs.

To learn more about other flags and options for the Closure Compiler, execute the jar with the --help flag:

java -jar compiler.jar --help

4.Closure Inspector

一个firefox的firebug 的插件~

5.Advanced Topics and Reference


468 X 60 广告位

标签： , , ,

转载注明：转自有米啦

本站遵循：署名-非商业性使用-禁止演绎 3.0 共享协议

收藏分享： QQ书签 / 百度收藏 / Google书签 / 收藏到鲜果 / Digg / Del.icio.us


相关文章

推荐文章

回复已关闭