如何使用maven缩小过滤的javascript文件？

Question

我有一个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>

Answer 1

很棒的问题,artbristol的伟大anwser,我投票了.这对我帮助很大.为了将来的参考,我发布了一个完整的解

• 将您的Javascript文件放入src/main/resources/js(或根据您的需要)
• 把你的CSS文件放入src/main/resources/css(或根据你的需要)
• 资源插件正在过滤您的javascript资源并将其复制到 target/classes/js/
• Yui正在拾取目标/ classes/js /中的文件并将它们聚合到 src/main/webapp
• 您可以使用测试您的设置jetty:run.Jetty正在拾取压缩和聚合的文件src/main/webapp
• 包阶段的war插件正在拾取你的文件 src/main/webapp
• 可选把SCM忽略,如文件.svnignore或.cvsignore文件导入src/main/webapp,排除all.js您最喜爱的SCM工具.

为避免压缩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.这有助于我们减少流量.

Answer 2

你可以将过滤后的js文件放在src/main/resources/filtered-js中,使用资源插件代替绑定process-resources,然后将maven-war-plugin的webresources配置指向target/classes/filtered-js？