你如何自动化你的Java Web应用程序的JavaScript minification?

我有兴趣听到你喜欢如何自动Java Java应用程序的JavaScript缩小。 以下是我特别感兴趣的几个方面:

  • 它如何整合? 它是你的构build工具的一部分,一个servletfilter,一个独立的程序后处理的WAR文件,或其他?
  • 启用和禁用是否容易 ? 尝试和debugging缩小的脚本是非常没有用的,但是对于开发人员来说,能够testing缩小不会破坏任何东西也是非常有用的。
  • 它是透明的吗?还是它有什么副作用(除了缩小的内在因素)在日常工作中我必须考虑?
  • 它使用哪个minifier
  • 它是否缺乏您能想到的任何function
  • 你喜欢它什么?
  • 喜欢这个吗?

这将主要作为我未来项目的参考(并希望其他的SOE也会发现它的信息),所以各种工具都很有趣。

(注意, 这不是一个关于哪个缩微器最好的问题,我们已经有很多。

综合post

如果您在此主题中发布新内容,请修改此帖以链接到您的post。

  • Ant apply任务(使用YUI压缩器)
  • 自定义YUI压缩机Ant任务
  • Maven YUI Compressor插件
  • 粒度(对于JSP,JSF,Grails,Ant)
  • Google Closure编译器的Antmacros
  • wro4j(Maven,servletfilter,普通Java等)
  • ant-yui-compress(压缩JS + CSS的ant任务)
  • JAWR
  • Minify Maven插件
  • 矮胖

我们使用Ant任务在生产构build期间使用YUICompressor来缩小js文件,并将结果放入一个单独的文件夹中。 然后我们将这些file upload到networking服务器。 你可以在这个博客中find一些关于YUI + Ant集成的好例子。

这里是一个例子:

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

我认为最好的工具之一是wro4j检查https://github.com/wro4j/wro4j

它做你需要的一切:

  • 保持项目networking资源(js&css)组织良好
  • 在运行时(使用简单的filter)或构build时间(使用maven插件)合并和缩小它们
  • 免费和开源:在Apache 2.0许可下发布
  • wro4j支持的几个缩小工具:JsMin,Google Closure压缩器,YUI等
  • 非常容易使用。 支持Servletfilter,普通Java或Springconfiguration
  • Javascript和CSS元框架支持:CoffeeScript,Less,Sass等
  • validation:JSLint,CSSLint等

可以运行在debugging以及生产模式。 只需指定它应该处理/预处理的所有文件,剩下的就完成了。

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

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

我已经为Google Closure编译器和Yahoo压缩器编写了antmacros,并将其包含在不同的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> 
  • 集成:在你的build.xml <import file="build-minifier.xml" /> ,然后像往常一样调用ant任务: <gc-js dir="${build.js.dir}" src="prototype" /> <yc-js-all dir="${build.js.dir}" />

  • select两个缩小器:Google Closure编译器和Yahoo压缩器,您应该手动下载它们并放在xml文件附近

  • Minifiers跳过已压缩的文件(以-min*结尾)

  • 通常我会制作三个版本的脚本:用于debugging的未压缩(例如prototype.js ),用生产服务器的封闭编译器( prototype-min-gc.js )压缩,用雅虎压缩( prototype-min-yc.js )闭包编译器使用风险优化,有时产生无效的压缩文件和雅虎压缩机更安全

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

我试了两种方法:

  1. 使用一个servletfilter。 在生产模式下,filter被激活,并压缩任何绑定到URL的数据,如* .css或* .js
  2. 使用maven和yuicompressor-maven-plugin ; 压缩是在未完成的情况下进行的(组装生产战时

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

它如何整合? 它是你的构build工具的一部分,一个servletfilter,一个独立的程序后处理的WAR文件,或其他?

使用maven

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

只有在组装最后一场战争时才启动它; 在开发模式中,您可以看到资源的未压缩版本

它是透明的吗?还是它有什么副作用(除了缩小的内在因素)在日常工作中我必须考虑?

绝对

它使用哪个minifier?

YUI压缩机

它是否缺乏您能想到的任何function?

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

你喜欢它什么?

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

我想你需要一个压缩库,例如Granule标签。

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

它使用不同的方法gzip和结合包含g:compress标签的javascripts,也有Ant任务

代码示例是:

 <G:压缩>
   <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( 'dateselect器'));
   </ SCRIPT>
 </克:压缩>
 ...

我们的项目已经处理了很多方面,但我们通过不同的迭代继续使用YUI压缩机 。

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

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

我们的客户从来没有提出关于压缩的问题,开发人员在决定debuggingJavaScript之前不会注意到这一点。 所以我会说这是相当透明的,如果有的话,最小的副作用。

我真的很惊讶没有人提到JAWRhttps://jawr.java.net/

它非常成熟,支持所有预期的标准function,还有一点。 这是如何反对OP的优秀标准。

它如何整合? 它是你的构build工具的一部分,一个servletfilter,一个独立的程序后处理的WAR文件,或其他?

它最初是在应用程序启动和服务的基础上进行处理/ 强化的 。 从3.x开始,他们在构build时join了对集成的支持。

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

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

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

它使用哪个minifier?

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

它是否缺乏您能想到的任何function?

SASS支持SASS在脑海中。 这就是说,它确实支持LESS

这工作对我来说: 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> 

我正在编写一个pipe理networking资产的框架,叫做“ 空仓” 。 它的目标是通过使用WebJars和ServiceLoaders比jawr或wro4j更简单,更现代。

它如何整合? 它是你的构build工具的一部分,一个servletfilter,一个独立的程序后处理的WAR文件,或其他?

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

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

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

它是透明的吗?还是它有什么副作用(除了缩小的内在因素)在日常工作中我必须考虑?

我相信这是透明的,但强烈赞成使用WebJars。

它使用哪个minifier?

无论你放在你的类path中的插件如何使用。 目前正在为Google Closure编译器编写一个插件。

它是否缺乏您能想到的任何function?

仍然预发布,但我正在使用它在生产。 maven插件仍然需要很多工作。

你喜欢它什么?

简单地添加一个依赖来configuration框架

你不喜欢这个吗?

这是我的宝贝,我喜欢这一切;)