maven about building version numbers, compressing css, js and appending version numbers to these files when building

I was recently responsible for building a project framework for the company. Since we are a back-end team and there are no professional front-end engineers to support us, I encountered some front-end problems during the construction process. , share it with everyone.

Main sharing points:

1. Automatically add the version number to the css and js file names when building the project. Solve the problem when the browser launches a new version The cache can be updated

2. Build the project to automatically compress css and js resource files to speed up the response

Solve the first problem when building A build version number must be generated, such as the timestamp at the build time. I happened to see such a plug-in on the Internet. The configuration information is as follows

<plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>buildnumber-maven-plugin</artifactId>
                <version>1.3</version>
                <executions>
                    <execution>
                        <phase>validate</phase>
                        <goals>
                            <goal>create-timestamp</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <configuration>
                        <format>{0,date,yyyy-MM-dd HH:mm:ss}</format>
                        <items>
                            <item>timestamp</item>
                        </items>
                    </configuration>
                </configuration>
            </plugin>

The function of this plug-in is to validate the phase of the maven life cycle during the build. Generate a version number. When you need this version number, you can introduce it through ${timestamp}. For the specific use of this plug-in, you can check the official website: http://mojo.codehaus.org/buildnumber-maven-plugin/index.html

With this version number, the next problem is to introduce css on each page. The js file can be copied and named xx.{version}.css, xx.${version}.js file, this requires the use of the second plug-in. See the configuration information below:

 <plugin>
                <groupId>net.alchim31.maven</groupId>
                <artifactId>yuicompressor-maven-plugin</artifactId>
                <version>1.5.0</version>
                <executions>
                    <execution>
                        <phase>${assert.compress}</phase> 
                        <goals>
                            <goal>compress</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <!--<nosuffix>true</nosuffix>-->
                    <suffix>.${timestamp}</suffix>
                    <force>true</force>
                    <encoding>utf-8</encoding>
                    <excludes>
                        <exclude>**/*.pack.js</exclude>
                        <exclude>**/compressed.css</exclude>
                        <exclude>**/*.min.css</exclude>
                        <exclude>**/*.min.js</exclude>
                    </excludes>
                </configuration>
            </plugin>

This plug-in not only It solves the second compressed css and js files that I wrote in the above sharing. At the same time, you can also append the version number to the compressed file name. It is great to have this plug-in. For specific usage information of this plug-in, please see: http:/ /davidb.github.io/yuicompressor-maven-plugin/index.html

Look at the build information below and pay attention to the content inside the box. You can see that jquery-ui.js is compressed into the file name jquery -ui.1414549216019.js named file, and this plug-in also prints out some other information.

At this point, all the style files you want are already there. The next thing to do is how to replace them in the file

The above is about maven Build version number, as well as compress css, js and append version numbers to these files during building. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!