CODEWITHSUNDEEP
javamavenspring-mvcspring-boot
dalcu
dalcu

Reputation: 263

Maven: How do you update html file to use new minified & concatenated JS & CSS file?

I have a lot of CSS & JS files in my html, and i'm using YUI Compressor to minify & concat all of these into 1x CSS and 1x JS.

Is there a way for maven to go into my HTML file, remove the 20+ lines of & includes and replace with the one that is minified ?

Upvotes: 3

Views: 910

Answers (2)

Aswin
Aswin

Reputation: 21

You can minify files at build time using 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>

The above two executions minifies the the JS files. You can use for CSS files also. In your HTML use this JS files as

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

Upvotes: 0

Luan Reffatti
Luan Reffatti

Reputation: 519

A good option is to use Grunt to replace the references within your html file. There is a Grunt plugin to do this: the grunt-usemin.

For example:

<!-- 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 -->

The output file:

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

Upvotes: 1

Related Questions