1

我正在尝试使用 Maven 的 YUI Compressor 插件来压缩我的 CSS 和 JavaScript,但我遇到了两个问题。

  1. 我的配置正确地压缩和聚合了 JavaScript 文件,但是如果我运行mvn package创建一个 war 文件,maven 将在复制文件夹之前压缩 JavaScript 文件src/main/webapp。这会覆盖所有压缩的 css 和 JavaScript 文件。我怎样才能解决这个问题?

  2. 如何让 tomcat maven 插件使用压缩的 JavaScript 文件而不是我src/main/webapp/scripts文件夹中的文件?当我的应用程序尝试读取all.js时,它失败了,因为它位于target/目录中而不是我的src/main/webapps文件夹中。

        <!-- Tomcat -->
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>tomcat-maven-plugin</artifactId>
            <version>1.1</version>
            <configuration>
                <warFile>target/myapp-1.0.war</warFile>
            </configuration>
        </plugin>
    
        <!-- YUI Compressor -->
        <plugin>
            <groupId>net.alchim31.maven</groupId>
            <artifactId>yuicompressor-maven-plugin</artifactId>
            <executions>
                <execution>
                    <goals>
                        <goal>compress</goal>
                    </goals>
                </execution>
            </executions>
            <configuration>
                <excludes>
                    <exclude>**/jwplayer.js</exclude>
                    <exclude>**/audio-player-noswfobject.js</exclude>
                    <exclude>**/audio-player-uncompressed.js</exclude>
                    <exclude>**/audio-player.js</exclude>
                    <exclude>**/jscharts.js</exclude>
                    <exclude>**/jquery-ui-1.8.16.custom.min.js</exclude>
                </excludes>
                <nosuffix>true</nosuffix>
                <jswarn>false</jswarn>
                <force>false</force>
                <aggregations>
                    <aggregation>
                        <removeIncluded>false</removeIncluded>
                        <insertNewLine>true</insertNewLine>
                        <output>${project.build.directory}/${project.build.finalName}/scripts/all.js</output>
                        <includes>
                            <include>**/json/json2.js</include>
                            <include>**/jwplayer/jwplayer.js</include>
                            <include>**/font/font.js</include>
                            <include>**/underscore/underscore.js</include>
                            <include>**/jquery/jquery-1.7.1.js</include>
                            <include>**/jquery/jquery-ui-1.8.16.custom.min.js</include>
                            <include>**/jquery/jquery.cookie.js</include>
                            <include>**/jquery/jquery.fancybox.js</include>
                            <include>**/jquery/jquery.highlight.js</include>
                            <include>**/jquery/jquery.jcrop.js</include>
                            <include>**/jquery/jquery.tmpl.js</include>
                            <include>**/jquery/farbtastic.js</include>
                            <include>**/jscharts/jscharts.js</include>
    
                            <include>**/myapp/homepage.js</include>
                        </includes>
                    </aggregation>
                </aggregations>
            </configuration>
        </plugin>
    

还是我只是以错误的方式实现我的目标?

这是打包战争时的maven输出。您可以看到,即使我yui:compress在预打包阶段告诉目标,它仍然发生在资源复制之前,因为这发生在package阶段:

[INFO] ------------------------------------------------------------------------
[INFO] Building My App 1.0
[INFO] ------------------------------------------------------------------------
Downloading: http://repo1.maven.org/maven2/net/alchim31/maven/yuicompressor-maven-plugin/maven-metadata.xml
Downloading: http://snapshots.repository.codehaus.org/net/alchim31/maven/yuicompressor-maven-plugin/maven-metadata.xml
Downloading: http://download.java.net/maven/2/net/alchim31/maven/yuicompressor-maven-plugin/maven-metadata.xml
Downloading: http://oss.sonatype.org/content/groups/public/net/alchim31/maven/yuicompressor-maven-plugin/maven-metadata.xml
Downloaded: http://oss.sonatype.org/content/groups/public/net/alchim31/maven/yuicompressor-maven-plugin/maven-metadata.xml (442 B at 2.1 KB/sec)
Downloaded: http://repo1.maven.org/maven2/net/alchim31/maven/yuicompressor-maven-plugin/maven-metadata.xml (403 B at 0.9 KB/sec)
[INFO] 
[INFO] --- maven-resources-plugin:2.4.3:resources (default-resources) @ myapp ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] Copying 26 resources
[INFO] Copying 4 resources
[INFO] 
[INFO] --- maven-compiler-plugin:2.3.2:compile (default-compile) @ myapp ---
[INFO] Nothing to compile - all classes are up to date
[INFO] 
[INFO] --- maven-compiler-plugin:2.3.2:compile (default) @ myapp ---
[INFO] Nothing to compile - all classes are up to date
[INFO] 
[INFO] --- aspectj-maven-plugin:1.3:compile (default) @ myapp ---
[INFO] 
[INFO] --- maven-resources-plugin:2.4.3:testResources (default-testResources) @ myapp ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] Copying 11 resources
[INFO] 
[INFO] --- maven-compiler-plugin:2.3.2:testCompile (default-testCompile) @ myapp ---
[INFO] Nothing to compile - all classes are up to date
[INFO] 
[INFO] --- aspectj-maven-plugin:1.3:test-compile (default) @ myapp ---
[INFO] No modifications found skipping aspectJ compile
[INFO] 
[INFO] --- maven-surefire-plugin:2.6:test (default-test) @ myapp ---
[INFO] Tests are skipped.
[INFO] 
[INFO] --- yuicompressor-maven-plugin:1.2:compress (default) @ myapp ---
[INFO] 960.css (9989b) -> 960.css (5897b)[59%]
[INFO] base.css (24210b) -> base.css (16437b)[67%]
[INFO] reset.css (2062b) -> reset.css (1096b)[53%]
[INFO] text.css (1270b) -> text.css (598b)[47%]
[INFO] tinymce.css (1994b) -> tinymce.css (1277b)[64%]
[INFO] jquery.fancybox-1.3.4.css (8852b) -> jquery.fancybox-1.3.4.css (6975b)[78%]
[INFO] farbtastic.css (1362b) -> farbtastic.css (478b)[35%]
[INFO] jquery.jcrop.css (748b) -> jquery.jcrop.css (582b)[77%]
[INFO] base.css (34567b) -> base.css (25034b)[72%]
[INFO] jquery-ui-1.8.11.custom.css (33994b) -> jquery-ui-1.8.11.custom.css (25351b)[74%]
.... (tons of javascript files)
[INFO] why.js (515b) -> why.js (354b)[68%]
[INFO] underscore.js (26960b) -> underscore.js (9472b)[35%]
[INFO] total input (1832512b) -> output (1198425b)[65%]
[INFO] generate aggregation : C:\Users\egervari\IdeaProjects\myapp-development\target\myapp-1.0\scripts\all.js
[INFO] all.js (564342b)
[INFO] nb warnings: 0, nb errors: 0
[INFO] 
[INFO] --- maven-war-plugin:2.1.1:war (default-war) @ myapp ---
[INFO] Packaging webapp
[INFO] Assembling webapp [myapp] in [C:\Users\egervari\IdeaProjects\myapp-development\target\myapp-1.0]
[INFO] Processing war project
[INFO] Copying webapp resources [C:\Users\egervari\IdeaProjects\myapp-development\src\main\webapp]

即使改变相位确实有效,那么我也必须让这个压缩在之前运行tomcat:run

maven 只是你认为的工作的错误工具吗?还是 maven/java 只是不符合繁重的 javascript 开发?为什么这么难?

4

2 回答 2

4

我遇到了类似的问题,我将阶段更改为打包。希望这对其他人也有帮助。

这很棘手。这与 nosuffix 配置选项有关。如果您删除 nosuffix 选项,则缩小按预期工作。

如果你真的必须有无后缀,那么你需要将执行阶段更改为“包”。

    <executions>
      <execution>
        <phase>package</phase>
          <goals>
    ......
    .....

prepare-resources 之前的任何阶段都不起作用,因为当构建战争时,它会从原始源位置获取 js,从而覆盖目标目录中的缩小 js(在 prepare-resources 阶段创建)。

当您删除 nosuffix 时,缩小会起作用,因为在打包阶段,文件名不同,因此不会覆盖文件,您将在目标目录中看到缩小和未缩小的 js 文件。

于 2013-03-11T15:09:24.910 回答
1

要解决此问题,您可以这样做。

(1) 将您的个人编码的 javascript 放在 src/main/js 中,而不是放在 src/main/webapp 中。使用 JS 放置的 mvn 约定。*注意:对于您包含的库,例如 jQuery 或其他任何库,您可以将它们转储到 src/main/webapp 中,这很好。那些已经最小化了你永远不会修改的javascript。

(2) 调整您的 YUI 插件以 (a) 忽略您未编码的 javascript,(b) 将压缩的 javascript 编译到输出文件夹。

       <plugin>
            <groupId>net.alchim31.maven</groupId>
            <artifactId>yuicompressor-maven-plugin</artifactId>
            <version>1.5.1</version>
            <executions>
                <execution>
                    <goals>
                        <goal>compress</goal>
                    </goals>
                </execution>
            </executions>
            <configuration>
                <nosuffix>true</nosuffix>

                <excludes>
                    <exclude>**/ui-framework/**</exclude>
                </excludes>
                <outputDirectory>${yui.outputdir}</outputDirectory>
            </configuration>
        </plugin>

因此,我们可以进行以下练习。

mvn process-resources


└── target
├── classes
│   ├── default.logback.xml
│   └── props
│       ├── default.props
│       └── production.default.props
├── packageLinkDefs.properties
└── yui-compressed
    └── jasmineDummyExample_element_mover.js

这里的重点是 YUI 正在将压缩的 javascript 编译到它自己的输出文件夹中,而 war 插件对此一无所知。

(3) 最后你只需要调整你的war插件来复制yui编译的源代码。

只要您遵循 maven 的 javascript 约定,您的 javascript 应该在 src/main/js/ 下编码,默认情况下您的 war 插件不会复制您的 javascipt(听起来很奇怪吧?)。

默认情况下,您的 war 插件将复制 src/main/webapp 下的任何静态资源。这很方便,因为它允许您指示 war 插件保留其将 src/main/webapp 复制到最终 war 文件的默认行为,此外,还可以复制您的 /src/target/yui-compressed 文件夹。这样,两个文件夹中没有重叠的文件,输出目录中没有文件覆盖。

这在以下代码段中进行了说明:

$ mvn war:war
[INFO] Scanning for projects...
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building lift-someproject Project 1.0
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] --- maven-war-plugin:2.5:war (default-cli) @ lift-someproject ---
[INFO] Packaging webapp
[INFO] Assembling webapp [lift-someproject] in [D:\scalaWorkspace\liftsomeprojectTwo\lift-someproject\target\lift-someproject]
[INFO] Processing war project
[INFO] Copying webapp webResources [D:\scalaWorkspace\liftsomeprojectTwo\lift-someproject\target\yui-compressed] to [D:\scalaWorkspace\liftsomeprojectTwo\lift-someproject\target\lift-someproject]
[INFO] Copying webapp resources [D:\scalaWorkspace\liftsomeprojectTwo\lift-someproject\src\main\webapp]
[INFO] Webapp assembled in [820 msecs]
[INFO] Building war: D:\scalaWorkspace\liftsomeprojectTwo\lift-someproject\target\lift-someproject.war
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 12.968s
[INFO] Finished at: Tue Dec 23 20:17:59 CET 2014
[INFO] Final Memory: 11M/246M
[INFO] ------------------------------------------------------------------------

您可以调整您的 war 文件以使用未粉碎的 yui 压缩 JS 文件来了解特殊文件夹:

   <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.5</version>
            <configuration>
                <webResources>
                    <resource>
                        <directory>${yui.outputdir}</directory>
                        <targetPath>js</targetPath>
                    </resource>
                </webResources>
            </configuration>
        </plugin>

如果您使用 Jetty 进行快速开发,您将需要进一步研究该插件,以确保它在 src/main/js 中找到您手动编码的 javascript。

那应该行得通。

于 2014-12-23T20:43:48.793 回答