堆棧內存溢出
  簡體   English   中英

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

[英]How to minify a filtered javascript file using maven?

 原文  2011-05-20 08:10:43  9   3    javascript/ maven/ filter/ minify

問題描述

我有一個javascript文件，用於使用Google分析跟蹤事件。 我為登台和生產環境創建了不同的帳戶。 調用GA代碼的腳本有我的帳戶ID的占位符。 帳戶ID已在過濾器文件中指定。 使用maven-war插件中的webResources元素，我們能夠成功替換最終WAR文件中的屬性。

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

所以，我正在尋找一種方法來運行復制過濾后的JS文件的WAR插件和創建WAR文件之間的minify目標。 以下是我的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>

3 個解決方案

解決方案1
 9  2011-08-02 11:52:49

很棒的問題，artbristol的偉大anwser，我投票了。 這對我幫助很大。 為了將來的參考，我發布了一個完整的解

  • 將您的Javascript文件放入src/main/resources/js （或任何符合您需求的文件）
  • 將您的CSS文件放入src/main/resources/css （或任何適合您的需求）
  • 資源插件正在過濾您的javascript資源並將它們復制到target/classes/js/
  • Yui正在拾取target / classes / js /中的文件，並將它們聚合到src/main/webapp
  • 您可以使用jetty:run測試您的設置jetty:run 。 Jetty正在src/main/webapp獲取壓縮和聚合的文件
  • 包階段的war插件正在src/main/webapp下獲取你的文件
  • 可選將一個SCM忽略文件（如.svnignore或.cvsignore文件）放入src/main/webapp以從您喜歡的SCM工具中排除all.js

為避免壓縮src / main / resources和src / main / webapp中的任何內容，必須使用excludes部分。 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。 這有助於我們減少流量。

解決方案2
 6 已采納  2011-05-24 10:22:51

你可以把過濾后的js文件放在src / main / resources / filtered-js中，改用資源插件，綁定到process-resources ，然后將maven-war-plugin的webresources配置指向target/classes/filtered-js ？

解決方案3
 2  2012-04-12 18:33:56

我正在使用Maven Minify插件來壓縮javascript和css文件。 它還將這些文件合並為一個文件。這工作正常

我已經使用maven-timestamp插件為這些文件添加了一個unque后綴作為瀏覽器緩存解決方案。這也正常工作

我堅持的是如何將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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用 uglifyjs-webpack 將源文件 (Javascript) 縮小為縮小文件 如何使用Minify插件在Sublime 3中使用Ajax調用來最小化js文件？ 如何導出縮小或丑化 javascript 庫文件 如何使用Eclipse JSDT縮小JavaScript文件？ 如何合並文件而不使用grunt縮小文件 使用PHP縮小JavaScript 如何自動縮小 Javascript？ 如何“縮小”Javascript 代碼 如何在 Webpack 中縮小文件？ 如何使用javascript :: minify模塊縮小目錄結構中的所有js文件？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM