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

Question

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

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

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

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

Answer 1

综合帖子

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

Answer 2

我们正在使用 Ant 任务在生产构建期间使用 YUICompressor 缩小 js 文件，并将结果放入单独的文件夹中。 然后我们将这些文件上传到 Web 服务器。

下面是一个例子：

<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 3

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

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

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

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

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

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

Answer 4

我尝试了两种方法：

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

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

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

使用 Maven

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

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

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

绝对地

它使用哪个压缩器？

YUI压缩机

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

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

你喜欢它什么？

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

Answer 5

我为 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>

集成： <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 ）压缩，用于故障排除的Yahoo（ prototype-min-yc.js ）压缩，因为闭包编译器使用有风险的优化，有时会产生无效的压缩文件，而 Yahoo 压缩器更安全
Yahoo 压缩器可以使用单个宏缩小目录中的所有文件，Closure 编译器不能

Answer 6

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

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

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

代码示例是：

<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 7

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

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

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

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

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

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

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

它使用哪个压缩器？

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

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

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

Answer 8

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

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

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

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

Answer 9

这对我有用： 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 10

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

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

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

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

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

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

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

它使用哪个压缩器？

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

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

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

你喜欢它什么？

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

你不喜欢它什么？

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

Answer 11

在这里参加聚会真的很晚，但认为这可能会帮助仍在寻找不同答案的人：

在尝试使用 YUI Compressor 后，我很失望它与更新版本的 jQuery 和 Prism（我的项目需要的两个主要的 3rd 方 JS 库，我想将它们压缩到一个文件中）不兼容。 所以我决定使用Terser ，它是支持 ES6+ 的 Uglify-JS 的一个分支。 我无法使用<exec>任务直接运行它，但使用 Windows 命令行方法至少适用于 Win 10（不是说它不能工作，但这是一项非常简单的工作-大约）。 无需向 Path 系统变量添加任何其他内容（因为 Node.JS 通常在安装过程中添加）。 我首先使用 ANT <concat>任务来制作一个大的、未压缩的文件。 使用<fileset>因为它会保留顺序（如果这很重要，无论如何）。

<concat destfile="${js-big-file}" encoding="UTF-8" outputencoding="UTF-8" fixlastline="true">
   <filelist refid="js-input-filelist"/>
</concat>

然后使用<exec>任务运行任何 NPM 程序，例如 Terser。 此任务的Apache 手册页指出这是运行 .bat 文件的 Windows 解决方法，但它确实允许您运行几乎任何命令行应用程序（甚至那些<exec>神秘地找不到的命令行应用程序）。

<exec executable="cmd">
   <arg value="/c"/>
   <arg value="terser"/>
   <arg value="${js-big-file}" />
   <arg value="-o" />
   <arg value="${smaller-js-file}"/>  
</exec>

整合？ 它是 ANT 构建脚本的一部分（一个支持自定义 JavaScript 的 DITA Open Toolkit 插件，除此之外，它本身不是 Java Web 应用程序，而是使用 Java 构建 HTML5 输出），因此集成只不过是添加那些任务到新目标（有更多关于设置默认值和检查输入参数的代码！）。

易于启用/禁用？ 就我而言，我有一个参数传递给 ANT Build，以便包括构建和缩小 JS 文件。 所以是的，如果我将参数设置为“是”，它只会执行这个目标。 在 ANT 构建中进行设置是一件非常容易的事情。

透明到目前为止，它似乎对我包含的几个 JS 文件中的任何一个都没有影响。 其中一些是我自己的（无论如何我都不是 JS 专家），还有一些，正如我所提到的，是常见的 JS 库。

Minifier Terser，但您可以使用此方法使用几乎任何通过命令行输入进行的缩小。

缺乏特色？ Terser仅适用于 JavaScript。 如果我想对我的 CSS 文件做同样的事情（我这样做），我使用 YUI Compressor。

Like That它是一个当前活跃的项目并且有很好的支持。 另外，当前的实现（仅通过 ANT <exec>目标调用它）允许我在需要使用其他东西时更换缩小器。

不喜欢它需要 Node.JS。 没有什么反对 Node.JS 的，请注意，只是这个特定的项目不需要它。 为此，我更喜欢使用像 YUI Compressor 这样的 Java .jar 文件（如果需要，我可以使用插件轻松分发它）。

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

问题描述

11 个解决方案

解决方案1
67 已采纳

综合帖子

解决方案2
13

解决方案3
12

解决方案4
8

解决方案5
8

解决方案6
4

解决方案7
3

解决方案8
2

解决方案9
1

解决方案10
1

解决方案11
1

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

问题描述

11 个解决方案

解决方案1 67 已采纳

综合帖子

解决方案2 13

解决方案3 12

解决方案4 8

解决方案5 8

解决方案6 4

解决方案7 3

解决方案8 2

解决方案9 1

解决方案10 1

解决方案11 1

解决方案1
67 已采纳

解决方案2
13

解决方案3
12

解决方案4
8

解决方案5
8

解决方案6
4

解决方案7
3

解决方案8
2

解决方案9
1

解决方案10
1

解决方案11
1