Maven构建前端资源 ，每次开发 Web 应用程序时，都会不可避免地使用静态资源。这些静态文件有多种不同的形式——HTML、CSS、LESS、SCSS、Javascript、纯文本、Markdown、Asciidoc 等，要将它们最好地整合到您的 Web 应用程序中以实现最简单的开发过程。本文旨在展示一些使用 Maven 插件简化开发并将这些静态资源整合到你的应用程序中的简单技术。
构建前端资源：提供静态资源
假定您已经能够从 Web 应用程序提供静态资源。通常，无论您使用哪个框架来构建您的应用程序，都有支持这一点的标准方法——例如 Spring——使用该mvc:resources标签。此外，假设您使用的是 Servlet 容器（如 Tomcat），通常情况下您可以提供src/main/webapp目录中出现的任何内容，而无需任何额外配置。重要的是您知道静态文件需要在生成的 WAR 文件中的什么位置结束，因为这将在本文给出的示例中重复使用。
构建前端资源：未经处理的文件
可以包含的绝对最简单的静态资源形式是完全不需要操作的静态资源。这些是您编写的文件，然后按原样包含到 Web 应用程序中。包括这些真的很简单。您需要做的就是将文件放入您希望它们出现的位置src/main/webapp或src/main/resources适当的位置。中包含的文件src/main/webapp将被复制到您的 WAR 文件的根目录中，而包含在中的文件src/main/resources将被复制到target/classes中，然后最终位于您的 Web 应用程序的类路径中。
构建前端资源：模板文件
有时您会发现您想要一些普通文件，但在其中包含从 Maven 构建中获取的扩展属性。例如，工件的版本号是可能包含的常见版本号。
这可以使用已经作为构建的一部分使用的标准 Maven 插件来实现——Maven Resources Plugin和Maven WAR Plugin所以让我们来看看它们。
Maven Resources 插件
无需任何额外配置，Maven 资源插件已用于将src/main/resources目录复制到生成的 JAR 或 WAR 文件中。（注意，Maven 资源插件也用于src/test/resources目录，这里提到的所有内容同样适用于此）。
默认情况下，它不会进行过滤，因此需要一些额外的配置来支持它。过滤是在将资源复制到您的 Web 应用程序时，用正确的值替换静态资源中的特殊占位符的行为。
配置资源过滤是将以下配置添加到pom.xml文件中的一个简单案例：
|
1 2 3 4 5 6 7 8 |
<build> <resources> <resource> <directory>src/main/filteredResources</directory> <filtering>true</filtering> </resource> </resources> </build> |
这个块有两个作用：
- 添加一个新目录，从中复制资源——在本例中我们使用
src/main/filteredResources - 对该目录中的所有资源启用过滤
如果可能，建议您将过滤后的资源分开，这样您就不会意外地对您不希望这样做的文件执行过滤。例如，Spring 上下文文件通常包含要扩展的属性，这些属性使用完全相同的语法，但您不希望通过此过程进行扩展。
然后通过在文件中添加特殊占位符来实现过滤。这些占位符都是 start${和 end }。大括号之间是您希望替换到文件中的属性名称。举例来说，您有一个src/main/filteredResources/details.txt包含以下内容的文件：
|
1 2 3 |
Group ID: ${project.groupId} Artifact ID: ${project.artifactId} Version: ${project.version} |
然后，在复制到构建的 webapp 中时，这将自动扩展为当前正在构建的项目的组 ID、工件 ID 和版本。
可以在此处使用的属性是 Maven Reactor 可用的任何内容。其中包括默认的 Maven 属性、POM 文件中定义的其他属性以及命令行上提供的系统属性。
Maven WAR 插件
Maven WAR Plugin 在构建过程中的集成度略低，因此配置它需要使用配置插件的标准机制。
同样，默认情况下这不会进行任何过滤。和以前一样，您可能希望对选择用于过滤的文件有选择性，以免过多地干扰其他来源。如果您希望使用与之前类似的设置，其中您有一个完整的目录用于过滤资源，一个用于未过滤的资源，那么以下配置将起作用。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <configuration> <webResources> <resource> <directory>src/main/filteredWebapp</directory> <filtering>true</filtering> </resource> <resource> <directory>src/main/webapp</directory> <filtering>false</filtering> </resource> </webResources> </configuration> </plugin> </plugins> </build> |
和以前一样，我们现在有两个目录，其中的文件将被包含到 WAR 文件中。中的文件src/main/webapp将按原样包含，而src/main/filteredWebapp将在复制时被过滤。
或者，您可能希望将所有文件放在一起，并有选择地仅过滤其中的一小部分。这可以通过以下方式实现：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <configuration> <webResources> <resource> <directory>src/main/webapp</directory> <filtering>true</filtering> <includes> <include>version.html</include> </includes> </resource> <resource> <directory>src/main/webapp</directory> <filtering>false</filtering> <excludes> <exclude>version.html</exclude> </excludes> </resource> </webResources> </configuration> </plugin> </plugins> </build> |
此版本将所有文件保留在 中src/main/webapp，并有选择地仅过滤指定的文件 – 在本例中为version.html. 这使得跟踪哪些文件正在使用变得更容易，但缺点是过滤文件列表需要指定两次——一次包含在过滤文件集中，一次从非过滤文件集中排除. 这是一个不幸的副作用，需要使用不同的resource标签来表示过滤和未过滤的资源。
构建前端资源：CSS文件
任何 Web 应用程序都不可避免地需要包含级联样式表 (CSS) 文件来描述页面的样式。这些 CSS 文件可以通过多种方式构建，从手工制作和作为简单资源包含在内（如上所述）到使用LESS或SASS等 CSS 预处理器。
LESS
LESS 文件可以通过使用LESS Maven 插件来支持。LESS 作为 Javascript 应用程序实现，LESS Maven 插件通过在运行构建的 JVM 内部执行 Javascript 将其合并到构建中。这个插件比 SASS 插件稍微简单一些，重量也更轻一些，但是 LESS 也是一个稍微简单一些的预处理器，功能更少。不过，如果您之前从未使用过 CSS 预处理器，那么它是一个不错的起点。
将构建配置为自动将 LESS 文件构建为 CSS 文件可以按如下方式完成：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<build> <plugins> <plugin> <groupId>org.lesscss</groupId> <artifactId>lesscss-maven-plugin</artifactId> <version>1.7.0.1.1</version> <configuration> <sourceDirectory> ${project.basedir}/src/main/less </sourceDirectory> <outputDirectory> ${project.build.directory}/${project.build.finalName}/css </outputDirectory> </configuration> <executions> <execution> <id>compile-less</id> <phase>generate-resources</phase> <goals> <goal>compile</goal> </goals> </execution> </executions> </plugin> </plugins> </build> |
此配置将编译目录*.less中的每个文件src/main/less，并将生成的 CSS 文件放在csswebapp 的目录中，就好像 CSS 文件本身已放入src/main/webapp/css. 如果您希望将文件包含在类路径中——就好像它们已经被写入，src/main/resources那么只需更改outputDirectory为使用classes而不是${project.build.finalName}.
SCSS
SCSS 文件可以通过使用SASS Maven 插件来支持。SASS 作为 Ruby 应用程序实现，SASS Maven 插件通过使用 Java 的JRuby绑定执行 Ruby 代码将其合并到构建中。这使得过程比 LESS 插件稍微复杂一些，但复杂性主要由 Maven 插件处理，用户不需要关心。
将构建配置为自动将 SCSS 文件构建为 CSS 文件可以按如下方式完成：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<build> <plugins> <plugin> <groupId>nl.geodienstencentrum.maven</groupId> <artifactId>sass-maven-plugin</artifactId> <version>2.23</version> <executions> <execution> <id>lint</id> <phase>validate</phase> <goals> <goal>scss-lint</goal> </goals> </execution> <execution> <id>build</id> <phase>generate-resources</phase> <goals> <goal>update-stylesheets</goal> </goals> </execution> </executions> <configuration> <sassSourceDirectory> ${project.basedir}/src/main/scss </sassSourceDirectory> <destination> ${project.build.directory}/${project.build.finalName}/css </destination> </configuration> </plugin> </plugins> </build> |
此配置将编译目录*.scss中的每个文件src/main/scss，并将生成的 CSS 文件放在csswebapp 的目录中，就好像 CSS 文件本身已放入src/main/webapp/css. 如果您希望将文件包含在类路径中——就好像它们已经被写入，src/main/resources那么只需更改destination为使用classes而不是${project.build.finalName}.
请注意，SASS 插件优于 LESS 插件的一项功能是支持样式表的 linting。这在上面配置为在早期阶段执行，并将确保 SCSS 文件在语法上有效。这对于确保构建在构建生命周期的早期有效非常有用。
构建前端资源：生成的 HTML 文件
有时您可能需要从作为构建的一部分的标记文件生成 HTML。例如，您可能以 Markdown 或 AsciiDoc 格式维护 API 文档，并希望将其 HTML 版本发布为部署的 webapp 的一部分。（甚至可以从您的代码生成这些，然后使用此插件将其转换为 HTML。这样做留给读者作为练习。）
Markdown文件
可以使用Markdown 页面生成器插件将 Markdown 文件转换为 HTML 文件。该插件将自动为所有处理的 Markdown 文件生成 HTML 文件。它可以配置为完全自定义生成文件的样式，但开箱即用它仍然可以生成完美可用的文件。
配置构建以自动将 Markdown 文件构建为 HTML 文件可以按如下方式完成：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<build> <plugins> <plugin> <groupId>com.ruleoftech</groupId> <artifactId>markdown-page-generator-plugin</artifactId> <version>1.0.0</version> <executions> <execution> <phase>process-sources</phase> <goals> <goal>generate</goal> </goals> </execution> </executions> <configuration> <inputDirectory> ${project.basedir}/src/main/markdown </inputDirectory> <outputDirectory> ${project.build.directory}/${project.build.finalName}/docs </outputDirectory> </configuration> </plugin> </plugins> </build> |
此配置将处理 webapp 目录中的每个*.md文件src/main/markdown并生成 HTML 文件，docs就好像 HTML 文件本身已放入src/main/webapp/docs.
AsciiDoc 文件
可以使用Asciidoctor Maven 插件将 AsciiDoc 文件转换为 HTML 文件。这个插件会自动为所有处理过的 AsciiDoc 文件生成 HTML 文件。它可以配置为完全自定义生成文件的样式，但开箱即用它仍然可以生成完美可用的文件。
配置构建以自动将 AsciiDoc 文件构建为 HTML 文件可以按如下方式完成：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<build> <plugins> <plugin> <groupId>org.asciidoctor</groupId> <artifactId>asciidoctor-maven-plugin</artifactId> <version>1.5.5</version> <executions> <execution> <phase>process-resources</phase> <goals> <goal>process-asciidoc</goal> </goals> </execution> </executions> <configuration> <sourceDirectory> ${project.basedir}/src/main/asciidoc </sourceDirectory> <outputDirectory> ${project.build.directory}/${project.build.finalName}/docs </outputDirectory> <preserveDirectories>true</preserveDirectories> <backend>html5</backend> </configuration> </plugin> </plugins> </build> |
此配置将处理每个*.ad,*.adoc和*.asciidoc文件src/main/asciidoc并在 webapp 的目录中生成 HTML 文件docs，就像 HTML 文件本身已放入src/main/webapp/docs.
无论是过滤一些模板化资源文件以添加构建信息、复制 CSS 文件、处理 LESS 或 SCSS 文件，还是将 Markdown 和 Asciidoc 转换为 HTML，Maven 插件都能满足所有需求。它们中的每一个都比这里可以涵盖的更深入，所以如果你想用它们做更多的事情，可能需要一些配置工作。但是，上述配置示例开箱即用，可以将对这些技术的支持添加为构建的标准部分。
