Maven：如何更新 html 文件以使用新的缩小和连接的 JS 和 CSS 文件？答案

【问题标题】：Maven: How do you update html file to use new minified & concatenated JS & CSS file?Maven：如何更新 html 文件以使用新的缩小和连接的 JS 和 CSS 文件？
【发布时间】：2015-12-28 10:41:57
【问题描述】：

我的 html 中有很多 CSS 和 JS 文件，我正在使用 YUI Compressor 将所有这些文件压缩并合并为 1x CSS 和 1x JS。

maven 有没有办法进入我的 HTML 文件，删除 20 多行 & 包含并替换为缩小的那一行？

【问题讨论】：

试试这个：com.googlecode.htmlcompressor

标签： java maven spring-mvc spring-boot

【解决方案1】：

一个不错的选择是使用 Grunt 替换 html 文件中的引用。有一个 Grunt 插件可以做到这一点：grunt-usemin。

例如：

<!-- build:js js/app.minjs -->
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->

输出文件：

<script src="js/app.min.js"></script>

【讨论】：

目标是使用maven，maven有没有插件可以做到这一点？
没用过，不过有个usemin-maven-plugin
usemin-maven-plugin 效果很好！正是我想要的。

【解决方案2】：

您可以在构建时使用 minify-maven-plugin 缩小文件。

        <plugin>
          <groupId>com.samaxes.maven</groupId>
          <artifactId>minify-maven-plugin</artifactId>
          <version>1.6.2</version>

          <!--The given minified Executions are used in all web-apps  -->

          <executions>

            <execution>
              <id>js-minify</id>
              <phase>compile</phase>
              <configuration>
                <charset>UTF-8</charset>
                <nosuffix>true</nosuffix>
                <jsSourceDir>static/js</jsSourceDir>
                <jsSourceFiles>
                  <jsSourceFile>template.scroll.js</jsSourceFile>
                  <jsSourceFile>template.input.js</jsSourceFile>
                  <jsSourceFile>template.modal.js</jsSourceFile>
                  <jsSourceFile>template.table.js</jsSourceFile>
                </jsSourceFiles>
                <jsTargetDir>static/js</jsTargetDir>
                <jsFinalFile>template-common-minified.js</jsFinalFile>
                <jsEngine>CLOSURE</jsEngine>
              </configuration>
              <goals>
                <goal>minify</goal>
              </goals>
            </execution>

            <execution>
              <id>template-js-minify</id>
              <phase>compile</phase>
              <configuration>
                <charset>UTF-8</charset>
                <nosuffix>true</nosuffix>
                <jsSourceDir>static/js</jsSourceDir>
                <jsSourceFiles>
                  <jsSourceFile>template.tabs.js</jsSourceFile>
                  <jsSourceFile>template.tooltip.js</jsSourceFile>
                  <jsSourceFile>template.message.js</jsSourceFile>
                </jsSourceFiles>
                <jsTargetDir>static/js</jsTargetDir>
                <jsFinalFile>template-metooltab-minified.js</jsFinalFile>
                <jsEngine>CLOSURE</jsEngine>
              </configuration>
              <goals>
                <goal>minify</goal>
              </goals>
            </execution>

          </executions>
        </plugin>

上述两个执行缩小了 JS 文件。您也可以用于 CSS 文件。在你的 HTML 中使用这个 JS 文件作为

<script src="template-metooltab-minified.js"></script> <script src="template-common-minified.js"></script>

【讨论】：

我要避免的事情是每次部署到生产环境时都必须手动替换