【问题标题】: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>

【讨论】:

  • 我要避免的事情是每次部署到生产环境时都必须手动替换
猜你喜欢
  • 2018-10-25
  • 1970-01-01
  • 1970-01-01
  • 2017-05-13
  • 2018-11-29
  • 2021-07-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多