java - Spring Boot AngularJs 应用程序：使用 wro4j-maven-plugin 生成 angular-bootstrap.css 失败

Question

我正在关注本教程的第 1 部分。我已经到了“从 Angular 加载动态资源”这一部分。根据教程说明，当我使用 maven 构建应用程序时mvn clean package， wro4j-maven-plugin 无法生成 angular-bootstrap.css 但 angular-bootstrap.js 已成功生成。我在 mvn 控制台中收到以下警告

$ mvn clean package
[INFO] Scanning for projects...
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building demo 0.0.1-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] --- maven-clean-plugin:2.6.1:clean (default-clean) @ myDemo ---
[INFO] Deleting E:\workspace\demo\target
[INFO]
[INFO] --- wro4j-maven-plugin:1.8.0:run (default) @ myDemo ---
[INFO] E:\workspace\demo/src/main/wro
[INFO] Executing the mojo:
[INFO] Wro4j Model path: E:\workspace\demo\src\main\wro\wro.xml
[INFO] targetGroups: null
[INFO] minimize: true
[INFO] ignoreMissingResources: null
[INFO] parallelProcessing: false
[INFO] buildDirectory: E:\workspace\demo\target
[INFO] destinationFolder: E:\workspace\demo\target
[INFO] jsDestinationFolder: E:\workspace\demo\target\classes\static\js
[INFO] cssDestinationFolder: E:\workspace\demo\target\classes\static\css
[INFO] The following groups will be processed: [angular-bootstrap]
[INFO] folder: E:\workspace\demo\target\classes\static\css
[INFO] processing group: angular-bootstrap.css
[WARNING] Less warnings are:
[WARNING] 0:2 Cannot link source map. Css result location is not know and could not be deduced from input less source..
[INFO] folder: E:\workspace\demo\target\classes\static\js
[INFO] processing group: angular-bootstrap.js
[INFO] file size: angular-bootstrap.js -> 240652 bytes
[INFO] E:\workspace\demo\target\classes\static\js\angular-bootstrap.js (240652 bytes)

因此，当我运行应用程序时，我得到 404 的 angular-bootstrap.css。请让我知道我哪里出错了。请在下面找到相关配置。

/demo/src/main/wro/wro.xml

<groups xmlns="http://www.isdc.ro/wro">
  <group name="angular-bootstrap">
    <css>webjar:bootstrap/3.3.7-1/less/bootstrap.less</css>   
    <css>file:@project.basedir@/src/main/wro/main.less</css>
    <js>webjar:jquery/2.2.4/jquery.min.js</js>
    <js>webjar:angularjs/1.4.9/angular.min.js</js>
    <js>webjar:angularjs/1.4.9/angular-route.min.js</js>
    <js>webjar:angularjs/1.4.9/angular-cookies.min.js</js>
   </group>
</groups>

/demo/src/main/wro/wro.properties

preProcessors=lessCssImport
postProcessors=less4j,jsMin

/demo/src/main/wro/main.less【其实这个文件是空的】

/demo/pom.xml

<build>

  <plugins>
    <plugin>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>
    <plugin>
      <groupId>ro.isdc.wro4j</groupId>
      <artifactId>wro4j-maven-plugin</artifactId>
      <version>1.8.0</version>
      <executions>
        <execution>
          <phase>generate-resources</phase>
          <goals>
            <goal>run</goal>
          </goals>
        </execution>
      </executions>
      <configuration>
        <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
        <cssDestinationFolder>${project.build.directory}/classes/static/css</cssDestinationFolder>
        <jsDestinationFolder>${project.build.directory}/classes/static/js</jsDestinationFolder>
        <wroFile>${basedir}/src/main/wro/wro.xml</wroFile>
        <extraConfigFile>${basedir}/src/main/wro/wro.properties</extraConfigFile>
        <contextFolder>${basedir}/src/main/wro</contextFolder>
      </configuration>
      <dependencies>
        <dependency>
          <groupId>org.webjars</groupId>
          <artifactId>jquery</artifactId>
          <version>2.2.4</version>
        </dependency>
        <dependency>
          <groupId>org.webjars</groupId>
          <artifactId>angularjs</artifactId>
          <version>1.4.9</version>
        </dependency>
        <dependency>
          <groupId>org.webjars</groupId>
          <artifactId>bootstrap</artifactId>
          <version>3.3.7</version>
        </dependency>
      </dependencies>
    </plugin>
  </plugins>

</build>

我在用

Apache Maven 3.3.9
Java version: 1.8.0_111
spring-boot 1.4.2.RELEASE
OS : windows 10

编辑 1

我尝试在 mvn 中使用 --debug 标志。我收到了这个调试信息

[DEBUG] Created file: angular-bootstrap.css
[DEBUG] No content found for group: angular-bootstrap.css

score 3 · Accepted Answer

更改 pom.xml 中的 bootstrap 版本后，问题得到解决，如下所示

<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>bootstrap</artifactId>
  <version>3.3.7-1</version>
</dependency>

现在 angular-bootstrap.css 已成功生成。

score 1 · Accepted Answer

我在该教程之后遇到了同样的问题，并通过从演示页面上链接的 github 项目中复制 wro4j<plugin>...</plugin>块pom.xml和wro.xml文件内容来克服它，而不是使用该页面上的代码示例。

score 1 · Accepted Answer

实际上，您可以在与解决方案一起发布的 github 存储库上找到更新版本（我也为此发布了拉取请求）。

问题是，我发现它违反了 DRY 原则，因为它们重复 jquery、bootstrap 和 angularjs 版本。

解决问题的三个步骤：

在一处定义版本（Maven 属性元素）：

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
    <wro4j.version>1.8.0</wro4j.version>
    <bootstrap.version>3.3.7-1</bootstrap.version>
    <angularjs.version>1.5.9</angularjs.version>
    <jquery.version>3.1.1-1</jquery.version>
</properties>

在插件配置中重用生成的资源文件夹以允许 IntelliJ 和其他 IDE 解析生成文件的路径：

<build>

    <resources>
        <resource>
            <directory>${project.basedir}/src/main/resources</directory>
        </resource>
        <resource>
            <directory>${project.build.directory}/generated-resources</directory>
        </resource>
    </resources>

    <plugins>
        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <executions>
                <execution>
                    <!-- Serves *only* to filter the wro.xml so it can get an absolute
                      path for the project -->
                    <id>copy-resources</id>
                    <phase>validate</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${basedir}/target/wro</outputDirectory>
                        <resources>
                            <resource>
                                <directory>src/main/wro</directory>
                                <filtering>true</filtering>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>

        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>

        <plugin>
            <groupId>ro.isdc.wro4j</groupId>
            <artifactId>wro4j-maven-plugin</artifactId>
            <version>${wro4j.version}</version>
            <executions>
                <execution>
                    <phase>compile</phase>
                    <goals>
                        <goal>run</goal>
                    </goals>
                </execution>
            </executions>
            <configuration>
                <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory
                </wroManagerFactory>
                <cssDestinationFolder>${project.build.directory}/generated-resources/static/css
                </cssDestinationFolder>
                <jsDestinationFolder>${project.build.directory}/generated-resources/static/js</jsDestinationFolder>
                <wroFile>${project.build.directory}/wro/wro.xml</wroFile>
                <extraConfigFile>${project.build.directory}/wro/wro.properties</extraConfigFile>
                <contextFolder>${project.build.directory}/wro</contextFolder>
            </configuration>
            <dependencies>
                <dependency>
                    <groupId>org.webjars</groupId>
                    <artifactId>jquery</artifactId>
                    <version>${jquery.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.webjars</groupId>
                    <artifactId>angularjs</artifactId>
                    <version>${angularjs.version}</version>
                </dependency>
                <dependency>
                    <groupId>org.webjars</groupId>
                    <artifactId>bootstrap</artifactId>
                    <version>${bootstrap.version}</version>
                </dependency>
            </dependencies>
        </plugin>
    </plugins>
</build>

利用 wro.xml 中的 Spring 属性过滤：

<groups xmlns="http://www.isdc.ro/wro">
  <group name="angular-bootstrap">
    <css>webjar:bootstrap/@bootstrap.version@/less/bootstrap.less</css>
    <css>file:src/main/wro/main.less</css>
    <js>webjar:jquery/@jquery.version@/jquery.min.js</js>
    <js>webjar:angularjs/@angularjs.version@/angular.min.js</js>
    <js>webjar:angularjs/@angularjs.version@/angular-route.min.js</js>
    <js>webjar:angularjs/@angularjs.version@/angular-cookies.min.js</js>
   </group>
</groups>

java - Spring Boot AngularJs 应用程序：使用 wro4j-maven-plugin 生成 angular-bootstrap.css 失败

编辑 1

3 回答 3

Related

Reference