2009-09-04 81 views
115

我很感興趣聽到您更喜歡爲Java Web應用程序自動化JavaScript縮小。這裏有幾個方面,我特別感興趣:如何爲Java Web應用程序自動化Javascript縮小?

  • 它是如何集成?它是你的構建工具,servlet過濾器,獨立程序後處理WAR文件還是其他的一部分?
  • 難道容易啓用和禁用?嘗試和調試一個縮小的腳本是非常沒有用的,但它對於開發人員能夠測試縮小不會破壞任何東西也是有用的。
  • 它是否工作透明,還是它有任何副作用(除了縮小的內在因素)我必須在日常工作中考慮?
  • 它使用哪種縮小器
  • 是否缺少你能想到的任何功能
  • 你喜歡它什麼?
  • 什麼不要你喜歡它嗎?

這將主要作爲我未來項目的參考(希望其他SOer也會發現它也是信息),所以各種工具都很有趣。

(注意,這不是一個問題,關於這minifier最好我們有很多這樣的周圍已經)

+0

這看起來真的很有趣,沒有聽說過它。我在快速搜索中找到的所有工具都是一次運行的手動工具。如果有螞蟻或maven插件,它會很好。希望有人有一個很好的答案。 – Jay 2009-09-04 15:25:58

+0

而且它似乎有人 - 檢查dfa的答案:http://stackoverflow.com/questions/1379856/how-do-you-automate-javascript-minification-for-your-java-web-applications/1379935#1379935 – gustafc 2009-09-04 15:42:58

回答

60
+0

minify-maven和maven yui壓縮機在本評論發佈之時對我而言並不擅長ES6功能 – DPM 2017-12-05 16:17:34

7

我嘗試了兩種方式:

  1. 使用Servlet過濾器。當處於生產模式時,過濾器被激活並且它使用maven和yuicompressor-maven-plugin壓縮任何綁定到URL的數據,如* .css或* .js
  2. ;在擠壓perfomed UNA-tantum,(組裝生產戰爭時)

當然後者的解決方案是更好,因爲它在運行時不消耗資源(我的web應用程序是使用谷歌應用程序引擎)和它doesn使應用程序代碼複雜化。所以假設後一種情況出現在以下答案中:

它如何整合?它是你的構建工具,servlet過濾器,後處理WAR文件的獨立程序還是其他內容的一部分?使用maven

是否容易啓用和禁用?嘗試和調試一個縮小的腳本是非常沒有用的,但它對於開發人員能夠測試縮小不會破壞任何東西也是有用的。

你只有在組裝最後的戰爭時才激活它;在開發模式下,你看到你的資源的未壓縮版本

是否(在微小固有的那些開),我有我的一天到一天的考慮透明地工作,或是否有任何副作用工作?

絕對

minifier它使用哪一個?

YUI壓縮機

是否缺少,你能想到的任何功能?

沒有,這是非常完整的,易於使用的

你喜歡什麼呢?

它是與我最喜愛的工具(Maven的)集成和插件是在中央資料庫(一個很好的行家公民)

+0

Maven插件 - 很好。太糟糕了,我當前的項目都使用螞蟻:) – gustafc 2009-09-04 15:41:02

+0

您可以使用YUI ant任務創建一個構建「生產戰爭文件」的目標 – dfa 2009-09-04 15:42:58

2

我們的項目已經處理了它的一些方法,但我們繼續使用YUI Compressor通過我們不同的迭代。

我們最初有一個servlet在首次訪問特定文件時處理JavaScript的壓縮;它被緩存。我們已經有到位處理自定義屬性的文件系統,所以我們只需更新我們的配置文件,以支持啓用或禁用取決於我們被工作環境中的壓縮機。

現在的發展環境,從未在調試時使用壓縮的JavaScript 。相反,我們在將我們的應用程序導出到WAR文件時處理構建過程中的壓縮。

我們的客戶從未對壓縮產生過擔憂,開發人員在決定調試JavaScript之前並未注意到這一點。所以我會說它是相當透明的,只有極少的副作用。

+0

如何在構建過程中使用YUI壓縮機? Maven插件還是別的? – gustafc 2009-09-04 15:45:03

+1

對不起,我們目前使用Ant。以下是Ant任務的有用鏈接:http://blog.gomilko.com/2007/11/29/yui-compression-tool-as-ant-task/ – doomspork 2009-09-04 16:22:44

12

我們使用Ant任務在生產構建期間使用YUICompressor來縮小js文件,並將結果放入一個單獨的文件夾中。然後我們將這些文件上傳到Web服務器。你可以找到YUI + Ant集成的一些很好的例子in this blog

下面是一個例子:

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

Snippet;不錯。你是否在開發版本上重新定位你的'script src',或者你是否將非縮小文件複製到壓縮/ js目錄中? – gustafc 2009-09-04 16:35:17

+0

只爲生產上傳壓縮文件在public_html/js原來的。好的是,本地和生產之間沒有編碼或路徑變化,壞處是你必須做一些手動上傳和覆蓋(我確信它可以是自動的,但對我們來說這是不值得的,上傳很少有js文件偶爾發佈並不算太大)。 – serg 2009-09-04 17:24:03

+0

我使用了你的代碼,但是它在我的項目的根目錄下創建了縮小文件,我設置了''但它不起作用。我怎樣才能在'$ {generatedScriptsDir}'中生成文件? – Vadorequest 2015-03-26 16:12:00

4

我想你需要一個壓縮庫,例如顆粒標籤。

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

它gzip和聯合JavaScript的由G包:用不同的方法壓縮標籤,也有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> 
... 

+0

是的,非常漂亮。 – gustafc 2011-04-17 19:31:43

8

我已經寫了螞蟻的宏用於Google Closure編譯器和Yahoo壓縮器,並將此文件包含在不同的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="[email protected]{dir}/@{src}.js" /> 
     <arg line="[email protected]{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}" />

  • 2個minifiers的選擇:谷歌關閉編譯器和雅虎壓縮機,您應該手動下載並放在xml文件附近

  • minifiers跳過已壓縮文件(以-min*結尾)

  • 通常我會製作三個版本的腳本:未壓縮(例如,prototype.js)進行調試,以閉合編譯器(prototype-min-gc.js)用於生產服務器,與雅虎(prototype-min-yc.js壓縮)進行故障排除的壓縮,因爲關閉編譯器使用風險優化和有時會產生無效的壓縮文件,雅虎壓縮機更加安全

  • 雅虎壓縮機能縮小與單宏目錄中的所有文件,Closure編譯器不能

11

我認爲這份工作最好的和正確的工具之一是wro4j退房

它你需要的一切:

  • 保持項目的網絡資源(JS & CSS)精心組織
  • 合併&它們最小化在運行時(使用簡單的過濾器)或建立時間(使用maven插件)
  • 自由和開放源碼:下一個Apache 2.0許可
  • 幾個微小工具,通過wro4j支持發佈:JsMin,谷歌關閉壓縮機,YUI等
  • 非常容易使用。支持Servlet過濾器,普通的Java或Spring配置
  • Javascript和CSS元框架的支持:CoffeeScript的,少,薩斯等
  • 驗證:JSLint的,CSSLint等

可以在調試以及生產模式下運行。只需指定它應該處理/預處理的所有文件,剩下的就完成了。

你可以簡單地包括合併,微細化以及這樣壓縮的資源:

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

的確很像一個漂亮的工具。感謝您的更新! – gustafc 2013-01-01 19:37:44

+0

它是否將版本添加到資源文件以強制刷新客戶端?我找不到有關此功能的任何文檔。 – Qiang 2016-04-13 22:39:46

+0

wro4j中唯一真正想念的就是css前綴。 – inafalcao 2017-11-19 20:01:47

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

我從search.maven.org獲得了$ {jar.yui.compressor}:http://search.maven.org/#search|gav|1|g%3A%22com.yahoo.platform.yui%22% 20於是%20A%3A%22yuicompressor%22 – 2013-07-05 00:53:34

2

我真的很驚訝沒有人提到JAWR - https://jawr.java.net/

這是非常成熟的,支持所有標準功能將被期待編輯,還有一點。這是如何對待OP的優秀標準。

它是如何整合?這是你的構建工具,一個servlet 過濾器,一個獨立的程序處理後的WAR文件,或 別的東西的一部分嗎?

它最初在應用程序啓動和服務時的處理/負擔是基於servlet。從3.x開始,他們添加了對integrating at build time的支持。

支持JSP和Facelets通過自定義的JSP標籤庫導入處理資源提供。除此之外,一個JS資源加載器來實現它支持loading the resources from static HTML pages

是否容易啓用和禁用?嘗試和調試縮小的腳本非常沒有用,但它對於開發人員能夠測試縮小不會破壞任何內容也很有用。

debug=on選項可用之前應用程序啓動來使用,和一個自定義GET參數可在單個請求中生產被指定爲在運行時對所述請求選擇性地切換調試模式。

它使用哪種縮小器?

對於JS,它支持YUI Compressor和JSMin,對於CSS我不確定。

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

SASS支持浮現在腦海。也就是說,它支持LESS

1

我在寫一個管理網絡資產的框架,名爲humpty。它的目標是通過使用WebJars和ServiceLoaders比jawr或wro4j更簡單,更現代。

它是如何整合?它是你的構建工具,servlet過濾器,後處理WAR文件的獨立程序還是其他內容的一部分?

在開發中,servlet根據需要處理資產。這些資產將在生產之前預先編譯並放置在一個公共文件夾中,以便唯一使用的部分是在HTML中生成正確的包含。

是否容易啓用和禁用?嘗試和調試一個縮小的腳本是非常沒有用的,但它對於開發人員能夠測試縮小不會破壞任何東西也是有用的。

這將通過切換開發模式和生產模式來完成。

它在我的日常工作中必須考慮透明嗎?還是它有任何副作用(除了縮小的內在因素)?

我相信它是透明的,但強烈傾向於使用WebJars。

它使用哪種縮小器?

無論你放在classpath中的插件如何使用。目前正在爲Google Closure編譯器編寫一個插件。

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

仍然預發佈,雖然我在生產中使用它。 Maven插件仍然需要很多工作。

你喜歡它什麼?

的只是添加依賴配置框架

你不喜歡什麼關於它的簡單性?

這是我的寶貝,我愛這一切;)