您如何为您的 Java Web 应用程序自动化 Javascript 缩小？

Question

提问by gustafc

I'm interested in hearing how you prefer to automate Javascript minification for your Java web apps. Here are a few aspects I'm particularly interested in:

我有兴趣了解您更喜欢如何为 Java Web 应用程序自动化 Javascript 缩小。以下是我特别感兴趣的几个方面：

How does it integrate?Is it part of your build tool, a servlet filter, a standalone program post-processing the WAR file, or something else?
Is it easy to enable and disable? It's very unfunny to try and debug a minified script, but it's also useful for a developer to be able to test that the minification doesn't break anything.
Does it work transparently, or does it have any side effects (apart from the ones inherent in minification) that I have to consider in my day-to-day work?
Which minifierdoes it use?
Does it lack any featuresthat you can think of?
What do you like about it?
What don'tyou like about it?

它是如何集成的？它是构建工具的一部分、servlet 过滤器、后处理 WAR 文件的独立程序还是其他东西？
是否容易启用和禁用？尝试调试一个缩小的脚本是非常无趣的，但对于开发人员来说，能够测试缩小不会破坏任何东西也很有用。
它是否透明地工作，或者它是否有我在日常工作中必须考虑的任何副作用（除了缩小固有的那些）？
它使用哪个压缩器？
它是否缺少您能想到的任何功能？
你喜欢它什么？
你不喜欢它什么？

This will mostly serve as a reference for my future projects (and hopefully other SOer's will find it informative, too), so all kinds of tools are interesting.

这将主要作为我未来项目的参考（希望其他 SOer 也会发现它提供信息），所以各种工具都很有趣。

(Note that this is not a question about which minifier is best. We have plenty of those around already.)

（请注意，这不是关于哪种压缩器最好的问题。我们已经有很多这样的压缩器了。）

Answer 1

采纳答案by gustafc

Round-up post

综合帖子

If you post something new in this thread, edit this post to link to yours.

如果您在此线程中发布新内容，请编辑此帖子以链接到您的帖子。

Answer 2

回答by dfa

I tried two ways:

我尝试了两种方法：

using a servlet filter. When in production mode, the filter is activated and it compress any data bounded to URL like *.css or *.js
using maven and yuicompressor-maven-plugin; the compression is perfomed una-tantum, (when assembling the production war)

使用 servlet 过滤器。在生产模式下，过滤器被激活并压缩任何绑定到 URL 的数据，如 *.css 或 *.js
使用 maven 和yuicompressor-maven-plugin；压缩执行 una-tantum，（组装生产战争时）

Of course the latter solution is better since it does not consume resources at runtime (my webapp is using google app engine) and it doesn't complicate your application code. So assume this latter case in the following answers:

当然后一种解决方案更好，因为它在运行时不消耗资源（我的 web 应用程序使用谷歌应用程序引擎）并且它不会使您的应用程序代码复杂化。因此，在以下答案中假设后一种情况：

How does it integrate? Is it part of your build tool, a servlet filter, a standalone program post-processing the WAR file, or something else?

它是如何集成的？它是构建工具的一部分、servlet 过滤器、后处理 WAR 文件的独立程序还是其他东西？

using maven

使用 Maven

Is it easy to enable and disable? It's very unfunny to try and debug a minified script, but it's also useful for a developer to be able to test that the minification doesn't break anything.

是否容易启用和禁用？尝试调试一个缩小的脚本是非常无趣的，但对于开发人员来说，能够测试缩小不会破坏任何东西也很有用。

you activate it only when assemblying the final war; in development mode you see the uncompressed version of your resources

您只有在组装最终战争时才能激活它；在开发模式下，您会看到资源的未压缩版本

Does it work transparently, or does it have any side effects (apart from the ones inherent in minification) that I have to consider in my day-to-day work?

它是否透明地工作，或者它是否有我在日常工作中必须考虑的任何副作用（除了缩小固有的那些）？

absolutely

绝对地

Which minifier does it use?

它使用哪个压缩器？

YUI compressor

YUI压缩机

Does it lack any features that you can think of?

它是否缺少您能想到的任何功能？

no, it is very complete and easy to use

不，它非常完整且易于使用

What do you like about it?

你喜欢它什么？

it is integrated with my favourite tool (maven) and the plugin is in the central repository (a good maven citizen)

它与我最喜欢的工具 (maven) 集成，插件位于中央存储库中（一个好的 maven 公民）

Answer 3

回答by doomspork

Our project has handled it a number of ways but we have continued to use the YUI Compressorthrough our different iterations.

我们的项目已经通过多种方式处理它，但我们通过不同的迭代继续使用YUI 压缩器。

We initially had a servlet handle the compression for JavaScript the first time that particular file was accessed; it was then cached. We already had a system in place to handle custom property files so we simply updated our configuration files to support enabling or disabling the compressor depending on the environment we were working in.

我们最初有一个 servlet 来处理 JavaScript 第一次访问特定文件时的压缩；然后它被缓存。我们已经有一个系统来处理自定义属性文件，因此我们只需更新我们的配置文件以支持根据我们工作的环境启用或禁用压缩器。

Now the development environments never use compressed JavaScript for debugging purposes. Instead we handle the compression in our build process when exporting our application to a WAR file.

现在，开发环境从不使用压缩的 JavaScript 进行调试。相反，在将应用程序导出到 WAR 文件时，我们会在构建过程中处理压缩。

Our client has never raised concerns about the compression and the developers don't notice it until they decide to debug JavaScript. So I'd say it's rather transparent with minimal, if any, side affects.

我们的客户从未对压缩提出过担忧，开发人员在决定调试 JavaScript 之前不会注意到这一点。所以我会说它相当透明，副作用很小（如果有的话）。

Answer 4

回答by serg

We are using Ant task to minify js files with YUICompressor during production build and put result into a separated folder. Then we upload those files to a web server. You can find some good examples for YUI+Ant integration in this blog.

我们正在使用 Ant 任务在生产构建期间使用 YUICompressor 缩小 js 文件，并将结果放入单独的文件夹中。然后我们将这些文件上传到 Web 服务器。您可以在此博客中找到一些关于 YUI+Ant 集成的好例子。

Here is an example:

下面是一个例子：

<target name="js.minify" depends="js.preprocess">
    <apply executable="java" parallel="false">
        <fileset dir="." includes="foo.js, bar.js"/>
        <arg line="-jar"/>
        <arg path="yuicompressor.jar"/>
        <srcfile/>
        <arg line="-o"/>
        <mapper type="glob" from="*.js" to="*-min.js"/>
        <targetfile/>
    </apply>
</target>

Answer 5

回答by Andy Bell

I think you need a compression library, for example Granule tag.

我认为您需要一个压缩库，例如 Granule 标签。

http://code.google.com/p/granule/

It gzip and combine javascripts wrapped by g:compress tag using different methods, also has Ant task as well

它使用不同的方法 gzip 和组合由 g:compress 标签包装的 javascripts，也有 Ant 任务

code sample is:

代码示例是：

<g:compress>
  <script type="text/javascript" src="common.js"/>
  <script type="text/javascript" src="closure/goog/base.js"/>
  <script>
       goog.require('goog.dom');
       goog.require('goog.date');
       goog.require('goog.ui.DatePicker');
  </script>
  <script type="text/javascript">
      var dp = new goog.ui.DatePicker();
      dp.render(document.getElementById('datepicker'));
  </script>
</g:compress>
...

Answer 6

回答by Victor

I have written ant macros for Google Closure compiler and Yahoo compressor and include this file in different web projects.

我为 Google Closure 编译器和 Yahoo 压缩器编写了 ant 宏，并将此文件包含在不同的 Web 项目中。

<?xml version="1.0" encoding="UTF-8"?>
<!-- CSS and JS minifier. -->
<!DOCTYPE project>
<project name="minifier" basedir=".">

  <property name="gc" value="compiler-r1592.jar" />
  <property name="yc" value="yuicompressor-2.4.6.jar" />

  <!-- Compress single js with Google Closure compiler -->
  <macrodef name="gc-js">
    <attribute name="dir" />
    <attribute name="src" />
    <sequential>
      <java jar="${gc}" fork="true">
        <!--
        - - compilation_level WHITESPACE_ONLY | SIMPLE_OPTIMIZATIONS | ADVANCED_OPTIMIZATIONS
        Specifies the compilation level to use. Default: SIMPLE_OPTIMIZATIONS
        - - warning_level QUIET | DEFAULT | VERBOSE
        Specifies the warning level to use.
        -->
        <arg line="--js=@{dir}/@{src}.js" />
        <arg line="--js_output_file=@{dir}/@{src}-min-gc.js" />
      </java>
    </sequential>
  </macrodef>

  <!-- Compress single js with Yahoo compressor -->
  <macrodef name="yc-js">
    <attribute name="dir" />
    <attribute name="src" />
    <sequential>
      <java jar="${yc}" fork="true">
        <arg value="@{dir}/@{src}.js" />
        <arg line="-o" />
        <arg value="@{dir}/@{src}-min-yc.js" />
      </java>
    </sequential>
  </macrodef>

  <!-- Compress all js in directory with Yahoo compressor -->
  <macrodef name="yc-js-all">
    <attribute name="dir" />
    <sequential>
      <apply executable="java" parallel="false">
        <fileset dir="@{dir}" includes="*.js" excludes="*-min*.js" />
        <arg line="-jar" />
        <arg path="${yc}" />
        <srcfile />
        <arg line="-o" />
        <mapper type="glob" from="*.js" to="@{dir}/*-min-yc.js" />
        <targetfile />
      </apply>
    </sequential>
  </macrodef>

  <!-- Compress all css in directory with Yahoo compressor -->
  <macrodef name="yc-css-all">
    <attribute name="dir" default="${build.css.dir}" />
    <sequential>
      <apply executable="java" parallel="false">
        <fileset dir="@{dir}" includes="*.css" excludes="*-min*.css" />
        <arg line="-jar" />
        <arg path="${yc}" />
        <arg line="-v --line-break 0" />
        <srcfile />
        <arg line="-o" />
        <mapper type="glob" from="*.css" to="@{dir}/*-min.css" />
        <targetfile />
      </apply>
    </sequential>
  </macrodef>
</project>

Integration: <import file="build-minifier.xml" />in your build.xml, then invoke as usual ant tasks: <gc-js dir="${build.js.dir}" src="prototype" /><yc-js-all dir="${build.js.dir}" />
Choice of two minifiers: Google Closure compiler and Yahoo compressor, you should download them manually and place near the xml file
Minifiers skip already compressed files (ending with -min*)
Usually I make three versions of script: uncompressed (e.g. prototype.js) for debugging, compressed with closure compiler (prototype-min-gc.js) for production server, compressed with Yahoo (prototype-min-yc.js) for troubleshooting because closure compiler uses risky optimizations and sometimes produces invalid compressed file and Yahoo compressor is more safe
Yahoo compressor can minify all files in a dir with single macro, Closure compiler cannot

集成：<import file="build-minifier.xml" />在你的 build.xml 中，然后像往常一样调用 ant 任务：<gc-js dir="${build.js.dir}" src="prototype" /><yc-js-all dir="${build.js.dir}" />
选择两个压缩器：Google Closure 编译器和 Yahoo 压缩器，您应该手动下载它们并放置在 xml 文件附近
压缩器跳过已经压缩的文件（以结尾-min*）
通常我制作三个版本的脚本：未压缩（例如prototype.js）用于调试，使用闭包编译器（prototype-min-gc.js）压缩用于生产服务器，使用雅虎（prototype-min-yc.js）压缩用于故障排除，因为闭包编译器使用有风险的优化并且有时会产生无效的压缩文件并且雅虎压缩器更安全
Yahoo 压缩器可以使用单个宏缩小目录中的所有文件，Closure 编译器不能

Answer 7

回答by SZ Quadri

I think one of the best and right tool for the job is wro4jCheck out https://github.com/wro4j/wro4j

我认为最适合这项工作的工具之一是wro4j查看https://github.com/wro4j/wro4j

It does everything you need:

它可以满足您的一切需求：

Keep project web resources (js & css) well organized
Merge & minify them at run-time (using a simple filter) or build-time (using maven plugin)
Free and open source: Released under an Apache 2.0 license
several minification tools supported by wro4j: JsMin, Google Closure compressor, YUI etc
Very easy to use. Supports Servlet Filter, Plain Java or Spring Configuration
Javascript and CSS Meta Frameworks Support: CoffeeScript, Less, Sass etc
Validation: JSLint, CSSLint etc

保持项目网络资源（js 和 css）井井有条
在运行时（使用简单的过滤器）或构建时（使用 maven 插件）合并和缩小它们
免费和开源：在 Apache 2.0 许可下发布
wro4j 支持的几种压缩工具：JsMin、Google Closure 压缩器、YUI 等
非常容易使用。支持 Servlet 过滤器、Plain Java 或 Spring 配置
Javascript 和 CSS 元框架支持：CoffeeScript、Less、Sass 等
验证：JSLint、CSSLint 等

Can run in debug as well as production modes. Just specify all the files it should handle/pre-process and it does the rest.

可以在调试和生产模式下运行。只需指定它应该处理/预处理的所有文件，剩下的就由它来完成。

You can simply include merged, minified and compressed resource like this:

您可以简单地包含合并、缩小和压缩的资源，如下所示：

<script type="text/javascript" src="wro/all.js"></script>

Answer 8

回答by Reverse Tarzan

This worked for me: https://bitbucket.org/m6_russell_francis/yui-compressor-ant-task/wiki/Home

这对我有用：https: //bitbucket.org/m6_russell_francis/yui-compressor-ant-task/wiki/Home

<!-- minimize all static *.css & *.js content -->
<target name="static-content-minify">

    <taskdef name="yuicompressor"
             classname="com.metrosix.yuicompressor.anttask.YuiCompressorTask">
        <classpath>
            <pathelement location="${jar.yui.compressor}"/>
            <pathelement location="${jar.yui.anttask.compressor}" />
        </classpath>
    </taskdef>

    <yuicompressor todir="${build.static.content.min}" charset="utf-8" 
        preserveallsemicolons="true" munge="true" >
        <fileset dir="${src.static.content}">
            <include name="**/*.css"/>
            <include name="**/*.js"/>
        </fileset>
    </yuicompressor>
</target>

Answer 9

回答by Amr Mostafa

I'm really surprised no one mentioned JAWR- https://j-a-w-r.github.io

我真的很惊讶没有人提到JAWR- https://jawr.github.io

It's pretty mature and supports all standard features that are to be expected, and a bit more. Here is how it holds against the OP's excellent criteria.

它非常成熟，支持所有预期的标准功能，甚至更多。以下是它如何与 OP 的优秀标准相抵触。

How does it integrate? Is it part of your build tool, a servlet filter, a standalone program post-processing the WAR file, or something else?

它是如何集成的？它是构建工具的一部分、servlet 过滤器、后处理 WAR 文件的独立程序还是其他东西？

It originally did the processing/heavy-lifting at application startup and serving was based on a servlet. Starting with 3.x they added support for integrating at build time.

它最初在应用程序启动时进行处理/繁重的工作，并且基于servlet提供服务。从 3.x 开始，他们增加了对构建时集成的支持。

Support for JSP and Facelets is provided through a custom JSP tag library to import processed resources. In addition to that, a JS resources loader is implemented which supports loading the resources from static HTML pages.

对 JSP 和 Facelets 的支持是通过自定义 JSP 标记库提供的，以导入已处理的资源。除此之外，还实现了一个 JS 资源加载器，它支持从静态 HTML 页面加载资源。

Is it easy to enable and disable? It's very unfunny to try and debug a minified script, but it's also useful for a developer to be able to test that the minification doesn't break anything.

是否容易启用和禁用？尝试调试一个缩小的脚本是非常无趣的，但对于开发人员来说，能够测试缩小不会破坏任何东西也很有用。

A debug=onoption is available to use before application startup, and a custom GETparameter can be specified at individual requests in production to toggle debug mode selectively at runtime for said request.

debug=on在应用程序启动之前可以使用一个选项，并且GET可以在生产中的各个请求中指定自定义参数，以便在运行时为所述请求选择性地切换调试模式。

Which minifier does it use?

它使用哪个压缩器？

For JS it supports YUI Compressor and JSMin, for CSS I'm not sure.

对于 JS，它支持 YUI Compressor 和 JSMin，对于 CSS，我不确定。

Does it lack any features that you can think of?

它是否缺少您能想到的任何功能？

SASSsupport comes to mind. That said, it does support LESS.

SASS我想到了支持。也就是说，它确实支持LESS.

Answer 10

回答by Mwanji Ezana

I'm writing a framework for managing web assets, called humpty. It aims to be simpler and more modern than jawr or wro4j by using WebJars and ServiceLoaders.

我正在编写一个管理网络资产的框架，称为humpty。它的目标是通过使用 WebJars 和 ServiceLoaders 比 jawr 或 wro4j 更简单、更现代。

How does it integrate? Is it part of your build tool, a servlet filter, a standalone program post-processing the WAR file, or something else?

它是如何集成的？它是构建工具的一部分、servlet 过滤器、后处理 WAR 文件的独立程序还是其他东西？

In development, a servlet processes the assets as necessary. The assets would then be pre-compiled before production and placed in a public folder, so that the only part that is used is generating the correct includes in the HTML.

在开发中，servlet 根据需要处理资产。然后，资产将在生产之前预编译并放置在公共文件夹中，以便唯一使用的部分是在 HTML 中生成正确的包含。

Is it easy to enable and disable? It's very unfunny to try and debug a minified script, but it's also useful for a developer to be able to test that the minification doesn't break anything.

是否容易启用和禁用？尝试调试一个缩小的脚本是非常无趣的，但对于开发人员来说，能够测试缩小不会破坏任何东西也很有用。

That would be done by switching between development and production modes.

这将通过在开发和生产模式之间切换来完成。

Does it work transparently, or does it have any side effects (apart from the ones inherent in minification) that I have to consider in my day-to-day work?

它是否透明地工作，或者它是否有我在日常工作中必须考虑的任何副作用（除了缩小固有的那些）？

I believe it is transparent, but does strongly favour the use of WebJars.

我相信它是透明的，但强烈支持使用 WebJars。

Which minifier does it use?

它使用哪个压缩器？

Whichever one the plugin you put on your classpath uses. Currently looking at writing a plugin for the Google Closure Compiler.

无论您放在类路径上的插件使用哪一个。目前正在考虑为 Google Closure Compiler 编写插件。

Does it lack any features that you can think of?

它是否缺少您能想到的任何功能？

Still pre-release, though I'm using it in production. The maven plugin still needs a lot of work.

虽然我在生产中使用它，但仍然是预发布版。maven 插件还需要做很多工作。

What do you like about it?

你喜欢它什么？

The simplicity of just adding a dependency to configure the framework

只需添加一个依赖项来配置框架的简单性

What don't you like about it?

你不喜欢它什么？

It's my baby, I love it all ;)

这是我的宝贝，我爱这一切;)

您如何为您的 Java Web 应用程序自动化 Javascript 缩小？

提问by gustafc

采纳答案by gustafc

Round-up post

综合帖子

回答by dfa

回答by doomspork

回答by serg

回答by Andy Bell

回答by Victor

回答by SZ Quadri

回答by Reverse Tarzan

回答by Amr Mostafa

回答by Mwanji Ezana

相关推荐

最近更新

标签

您如何为您的 Java Web 应用程序自动化 Javascript 缩小？

提问by gustafc

采纳答案by gustafc

Round-up post

综合帖子

回答by dfa

回答by doomspork

回答by serg

回答by Andy Bell

回答by Victor

回答by SZ Quadri

回答by Reverse Tarzan

回答by Amr Mostafa

回答by Mwanji Ezana

相关推荐

未捕获 Java 异常

如何从 NodeJs 调用 Java 程序

在 Java 中将数组保存到文本文件

Java 从 .dat 文件中读取信息

相关推荐

最近更新

标签