125

我很想听听您喜欢如何为您的 Java Web 应用程序自动化 Javascript 缩小。以下是我特别感兴趣的几个方面:

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

这将主要作为我未来项目的参考(希望其他 SOer 也能从中受益),因此各种工具都很有趣。

(请注意,这不是关于哪个缩小器最好的问题。我们周围已经有很多了。)

4

11 回答 11

13

我们正在使用 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>
于 2009-09-04T16:22:55.017 回答
12

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

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

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

可以在调试和生产模式下运行。只需指定它应该处理/预处理的所有文件,剩下的就交给它了。

您可以像这样简单地包含合并、缩小和压缩的资源:

<script type="text/javascript" src="wro/all.js"></script>
于 2013-01-01T06:18:25.880 回答
8

我尝试了两种方法:

  1. 使用 servlet 过滤器。在生产模式下,过滤器被激活并压缩任何绑定到 URL 的数据,如 *.css 或 *.js
  2. 使用 maven 和yuicompressor-maven-plugin;压缩是 un-tantum 执行的,(在组装生产战时

当然后一种解决方案更好,因为它在运行时不消耗资源(我的 webapp 使用的是 google app 引擎)并且它不会使您的应用程序代码复杂化。因此,在以下答案中假设后一种情况:

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

使用行家

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

您仅在组装最终战争时激活它;在开发模式下,您会看到资源的未压缩版本

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

绝对地

它使用哪个缩小器?

YUI 压缩机

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

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

你喜欢它什么?

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

于 2009-09-04T15:25:11.503 回答
8

我为 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 压缩器更安全

  • 雅虎压缩器可以用单个宏压缩目录中的所有文件,闭包编译器不能

于 2012-01-05T07:26:41.220 回答
4

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

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

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

代码示例是:

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

于 2011-04-15T23:34:18.733 回答
3

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

它非常成熟,支持所有预期的标准功能,还有更多。以下是它如何反对 OP 的优秀标准。

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

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

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

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

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

它使用哪个缩小器?

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

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

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

于 2014-03-21T21:49:45.100 回答
2

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

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

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

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

于 2009-09-04T15:25:27.260 回答
2

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

在尝试使用 YUI Compressor 之后,我很失望它与最新版本的 jQuery 和 Prism(我的项目需要的两个主要的 3rd 方 JS 库,我想压缩到一个文件中)不兼容。所以我决定使用Terser,它是 Uglify-JS 的一个分支,支持 ES6+。我无法使用该<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 文件(如果需要,我可以使用插件轻松分发它)。

于 2019-11-06T02:49:29.107 回答
1

我正在编写一个用于管理 Web 资产的框架,称为humpty。它旨在通过使用 WebJars 和 ServiceLoaders 比 jawr 或 wro4j 更简单、更现代。

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

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

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

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

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

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

它使用哪个缩小器?

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

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

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

你喜欢它什么?

只需添加依赖项即可配置框架的简单性

你不喜欢它什么?

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

于 2014-11-25T12:51:41.757 回答
1

这对我有用: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>
于 2013-07-05T00:50:25.650 回答