如何使用maven縮小過濾後的JavaScript文件？

我有一個JavaScript文件，用於使用Google Analytics（分析）跟蹤事件。我爲分段和生產環境創建了不同的帳戶。調用GA代碼的腳本擁有我賬戶ID的佔位符。帳戶ID已在過濾器文件中指定。使用maven-war插件中的webResources元素，我們能夠成功替換最終WAR文件中的屬性。如何使用maven縮小過濾後的JavaScript文件？

現在，我們還使用maven-yuicompressor插件來縮小和聚合我們所有的javascript文件。問題是，如果我將minify目標的執行附加到包階段，那麼WAR會在Javascript被縮小之前創建。如果我更早地將縮小目標附加到任何事情上，那麼直到縮小時才生成無效文件。

所以，我正在尋找一種方法來運行WAR插件複製過濾JS文件和創建WAR文件之間的縮小目標。這裏是我的pom.xml的相關部分：

  <plugin> 
      <groupId>org.apache.maven.plugins</groupId> 
      <artifactId>maven-war-plugin</artifactId> 
      <version>2.1.1</version> 
      <configuration> 
       <webResources> 
       <resource> 
        <directory>src/main/webapp/js</directory> 
        <targetPath>js</targetPath> 
        <filtering>true</filtering> 
       </resource> 
       </webResources> 
      </configuration> 
      </plugin> 
      <plugin> 
      <groupId>net.alchim31.maven</groupId> 
      <artifactId>yuicompressor-maven-plugin</artifactId> 
      <version>1.1</version> 
      <executions> 
       <execution> 
       <goals> 
        <goal>compress</goal> 
       </goals> 
       <phase>package</phase> 
       </execution> 
      </executions> 
      <configuration> 
       <linebreakpos>-1</linebreakpos> 
       <nosuffix>true</nosuffix> 
       <force>true</force> 
       <aggregations> 
       <aggregation> 
        <output>${project.build.directory}/${project.build.finalName}/js/mysite-min.js</output> 
        <inputDir>${project.build.directory}/${project.build.finalName}/js</inputDir> 
        <includes> 
        <include>jquery-1.4.2.js</include> 
        <include>jquery-ui.min.js</include> 
        <include>ga-invoker.js</include> 
        </includes> 
       </aggregation> 
       </aggregations> 
      </configuration> 
      </plugin>

來源

2011-05-20 Chandranshu

可以綁定到'prepare-package'嗎？ – 2011-05-20 14:45:24

正如我之前提到的那樣，在包裝階段之前不能使用，因爲過濾器在此之前尚未應用。戰爭插件複製網絡資源並將過濾器作爲程序包階段本身的一部分。 – Chandranshu 2011-05-23 08:14:14

你可以把過濾的js文件的src /主/資源/過濾-JS，使用的資源，而不是插件，它結合process-resources，再點maven-war-plugin的webresources配置到target/classes/filtered-js？

來源

2011-05-24 10:22:51 artbristol

你已經打我發佈答案。我昨天做了類似的事情。我讓yuicompressor插件保持連接到默認的process-resources階段，但將其輸出配置到target/js。然後，我使用maven-war插件的webResources配置來過濾此目錄的內容，並將它們放入target//js中。仍然必須標記你的答案是正確的。 – Chandranshu 2011-05-25 05:38:09

偉大的問題，artbristol偉大的anwser，我投了票。這對我幫助很大。以供將來參考我發佈一個完整的解決方案：

把你的JavaScript文件到src/main/resources/js（或任何適合您的需求）
把你的CSS文件到src/main/resources/css（或任何適合您的需求）
資源插件過濾你的JavaScript資源，並將它們複製到target/classes/js/
衣是拿起文件在目標/班/ JS /和聚合他們src/main/webapp
您可以測試設置。 Jetty是在封裝階段拿起壓縮和彙總文件src/main/webapp
戰爭插件拿起您的文件src/main/webapp下
可選把SCM忽略文件中像.svnignore或.cvsignore文件到src/main/webapp從您最喜愛的SCM工具排除all.js 。

exclude部分是避免壓縮src/main/resources和src/main/webapp中的任何內容所必需的部分。 yui應該只拾取已經過濾的文件進行聚合。

<build> 
    <resources> 
     <resource> 
      <directory>src/main/resources</directory> 
      <filtering>true</filtering> 
     </resource> 
    </resources> 
    <plugins> 
     <plugin> 
      <groupId>net.alchim31.maven</groupId> 
      <artifactId>yuicompressor-maven-plugin</artifactId> 
      <version>1.1</version> 
      <executions> 
       <execution> 
        <goals> 
         <goal>compress</goal> 
        </goals> 
       </execution> 
      </executions> 
      <configuration> 
       <excludes> 
        <exclude>*/*</exclude> 
       </excludes> 
       <force>true</force> 
       <nosuffix>true</nosuffix> 
       <removeIncluded>true</removeIncluded> 
       <aggregations> 
        <aggregation> 
         <insertNewLine>true</insertNewLine> 
         <output>${project.basedir}/src/main/webapp/js/all.js</output> 
         <includes> 
          <include>${project.build.directory}/classes/js/file1.js</include> 
          <include>${project.build.directory}/classes/js/file2.js</include> 
        </aggregation> 
        <aggregation> 
         <insertNewLine>true</insertNewLine> 
         <output>${project.basedir}/src/main/webapp/css/all.css</output> 
         <includes> 
          <include>${project.build.directory}/classes/css/file1.css</include> 
          <include>${project.build.directory}/classes/css/file2.css</include> 
        </aggregation> 
       </aggregations> 
      </configuration> 
     </plugin>

爲什麼要過濾css文件？

我用它來引用我相似圖片

div.header { 
    background-image: url(/img/background.${project.version}.png) 
}

Maven的過濾我的項目版本到我的CSS文件。我們imageserver任何傳入的請求過濾像這

protected void doHttpFilter (HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws IOException, ServletException 
{ 
    String uri = request.getRequestURI(); 
    if (isStaticRequest(uri)) 
    { 
     String uriWithoutVersion = stripVersionString(uri); 
     String versionRequested = getVersionString(uri); 
     if (version.equals(versionRequested)) 
     { 
      response.setHeader(CACHE_CONTROL_HEADER_NAME, CACHE_CONTROL_HEADER_VALUE); 
      response.setHeader(EXPIRES_HEADER_NAME, EXPIRES_HEADER_VALUE); 
     } 
     RequestDispatcher dispatcher = request.getRequestDispatcher(uriOhneVersionsnummer); 
     dispatcher.forward(request, response); 
    } else { 
     chain.doFilter(request, response); 
     return; 
    } 
}

這樣的瀏覽器緩存永遠的每個文件。但是當我上傳一個新版本時，所有文件引用都有一個新的版本號，所以瀏覽器再次獲取圖像或CSS。這幫助我們減少了流量。

來源

2011-08-02 11:52:49 Janning

我使用Maven Minify Plugin來壓縮javascript和css文件。它還合併這些文件合併爲一個單一的文件。這個是工作的罰款

我已經使用Maven的時間戳插件把一個unque後綴將這些文件作爲一個瀏覽器緩存solution.This也工作正常

事情我堅持是如何取代在生成執行時新創建的js和css的所有引用。

我正在調查相同的maven-replace-plugin。它可以刪除所有實例。它可以替換爲新的值。但我需要保留新合併的js和css的一個實例。

<plugins> 
    <plugin> 
    <groupId>com.keyboardsamurais.maven</groupId> 
    <artifactId>maven-timestamp-plugin</artifactId> 
    <version>1.0</version> 
    <configuration> 
    <propertyName>timestamp</propertyName> 
    <timestampPattern>ddMMyyyyHHmm</timestampPattern> 
    </configuration> 
    <executions> 
    <execution> 
     <goals> 
     <goal>create</goal> 
     </goals> 
    </execution> 
    </executions> 
    </plugin> 
    <plugin> 
    <artifactId>maven-resources-plugin</artifactId> 
    <version>2.5</version> 
    <executions> 
    <execution> 
     <id>copy-resources</id> 
     <!-- here the phase you need --> 
     <phase>validate</phase> 
     <goals> 
     <goal>copy-resources</goal> 
     </goals> 
     <configuration> 
     <outputDirectory>${basedir}/target/resources/themes</outputDirectory> 
     <resources> 
     <resource> 
     <includes> 
      <include>**/*.vm</include> 
     </includes> 
     <directory>${basedir}/src/main/resources/themes</directory> 
     <filtering>true</filtering> 
     </resource> 
     </resources> 
     </configuration> 
    </execution> 
    </executions> 
    </plugin> 
    <plugin> 
    <groupId>com.samaxes.maven</groupId> 
    <artifactId>maven-minify-plugin</artifactId> 
    <version>1.3.5</version> 
    <executions> 
    <execution> 
     <id>default-minify</id> 
     <phase>process-resources</phase> 
     <configuration> 
     <cssSourceDir>../resources/themes/XXXX/default/template-resources/stylesheet</cssSourceDir> 
     <cssSourceIncludes> 
     <cssSourceInclude>**/*.css</cssSourceInclude> 
     </cssSourceIncludes> 
     <cssFinalFile>style.css</cssFinalFile> 
     <jsSourceDir>../resources/themes/XXXX/default/template-resources/js</jsSourceDir> 
     <jsSourceIncludes> 
     <jsSourceInclude>*.js</jsSourceInclude> 
     </jsSourceIncludes> 
     <jsSourceFiles> 
     <jsSourceFile>/libs/json.js</jsSourceFile> 
     </jsSourceFiles> 
     <jsFinalFile>script.js</jsFinalFile> 
     <suffix>-${timestamp}</suffix> 
     </configuration> 
     <goals> 
     <goal>minify</goal> 
     </goals> 
    </execution> 
    </executions> 
    </plugin> 
    <plugin> 
    <groupId>com.google.code.maven-replacer-plugin</groupId> 
    <artifactId>replacer</artifactId> 
    <version>1.5.0</version> 
    <executions> 
    <execution> 
     <phase>prepare-package</phase> 
     <goals> 
     <goal>replace</goal> 
     </goals> 
    </execution> 
    </executions> 
    <configuration> 
    <includes> 
     <include>target/resources/themes/XXXX/default/templates/velocity/**/*.vm</include> 
    </includes> 
    <replacements> 
     <replacement> 
     <token><![CDATA[<link rel="stylesheet" href="/storefront/template-resources/stylesheet/]]>([a-zA-Z0-9\-\_]*.css)<![CDATA[" type="text/css"/>]]>([])</token>  
     <value></value> 
     </replacement> 
     <replacement> 
     <token><![CDATA[<link rel="stylesheet" href="/storefront/template-resources/stylesheet/powerreviews]]>([a-zA-Z0-9\-\_]*.css)<![CDATA[" type="text/css"/>]]></token>  
     <value></value> 
     </replacement> 

     <replacement> 
     <token><![CDATA[<script type="text/javascript" src="/storefront/template-resources/js/]]>([a-zA-Z0-9\-\_\.]*.js)<![CDATA["></script>]]></token> 
     <value></value> 
     </replacement> 
     <replacement> 
     <token><![CDATA[<script type="text/javascript" src="/storefront/template-resources/js/libs/]]>([a-zA-Z0-9\-\_\.]*.js)<![CDATA["></script>]]></token> 
     <value></value> 
     </replacement> 
    </replacements> 
    </configuration> 
    </plugin> 
    <plugin> 
    <groupId>org.apache.maven.plugins</groupId> 
    <artifactId>maven-assembly-plugin</artifactId> 
    <executions> 
    <execution> 
     <id>dist</id> 
     <goals> 
     <goal>single</goal> 
     </goals> 
     <phase>package</phase> 
     <configuration> 
     <descriptors> 
     <descriptor>src/main/assembly/assembly.xml</descriptor> 
     </descriptors> 
     </configuration> 
    </execution> 
    </executions> 
    </plugin> 
    </plugins>

來源

2012-04-12 18:33:56

用於緩存清除，您可能希望使用MD5校驗和而不是時間戳。有了時間戳，無論您更改JS和CSS，每次構建時緩存都將失效。 – Chandranshu 2013-03-25 05:14:16

如何使用maven縮小過濾後的JavaScript文件？

回答

相關問題