Mavenを使用してフロントエンドの静的リソースを圧縮、マージ

まず、エンジニアリング構造を見てみましょう.プロジェクト
└─main     ├─Java     └─webapp         ├─app         │  │  index.html         │  │           │  ├─css         │  │      style.css         │  │               │  └─js         │          app1.js         │          app2.js         │          jQuery-1.9.1.min.js         │                   └─WEB-INF                 web.xml
index.htmlではapp 1.jsとapp 2.jsを参照し、まずyuicompressor-maven-pluginによりapp 1.js,app 2.jsを圧縮・統合する.pom.xmlは、min化されたすべてのファイルが除外されるように構成されています.たとえば、jquery-1.9.1.min.js

<plugin>
	<groupId>net.alchim31.maven</groupId>
	<artifactId>yuicompressor-maven-plugin</artifactId>
	<version>1.3.0</version>
	<executions>
		<execution>
			<goals>
				<goal>compress</goal>
			</goals>
		</execution>
	</executions>
	<configuration>
		<encoding>UTF-8</encoding>
		<!--    js      -->
		<jswarn>false</jswarn>
		<nosuffix>true</nosuffix>
		<linebreakpos>-1</linebreakpos>
		<includes>
			<include>app/js/*.js</include>
			<include>app/js/*.css</include>
		</includes>
		<excludes>
			<exclude>**/**min.js</exclude>
		</excludes>
		<aggregations>
			<aggregation>
				<removeIncluded>true</removeIncluded>
				<insertNewLine>true</insertNewLine>
				<inputDir>${project.build.directory}/${project.build.finalName}</inputDir>
				<output>${project.build.directory}/${project.build.finalName}/app/js/app.pack.js</output>
				<includes>
					<include>app/js/app*.js</include>
				</includes>
				<excludes>
					<exclude>**/**min.js</exclude>
				</excludes>
			</aggregation>
		</aggregations>					
	</configuration>
</plugin>

ここではapp 1.jsとapp 2.jsをapp.pack.jsにマージしますが、光マージはまだできません.index.htmlではapp 1.jsとapp 2.jsを参照しているので、置き換えなければなりません.次はmaven-replacer-pluginで置換作業を完了します.汎用性(jsまたはcssファイル名を書く必要がなく、複数のファイルのマージと置換をサポートする必要がありません)のために、htmlに特殊な識別子を使用して置換するjsを絞り込むことで、この識別子を使用して置換ターゲットを探すことができます.index.html

	<script type="text/javascript" src="app/js/jquery-1.9.1.min.js"></script>
	<strong><!-- mergeTo:app.pack.js --></strong>
	<script type="text/javascript" src="app/js/app1.js"></script>
	<script type="text/javascript" src="app/js/app2.js"></script>
	<strong><!-- mergeTo --></strong>

以上のように、すべての ... 区間のjs参照はxxx.jsに置き換えられます  ふえる maven-replacer-plugin pomの構成は次のとおりです.

<plugin>
    <groupId>com.google.code.maven-replacer-plugin</groupId>
    <artifactId>replacer</artifactId>
    <version>1.5.2</version>
    <executions>
        <execution>
            <phase>package</phase>
            <goals>
                <goal>replace</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <file>${project.build.directory}/${project.build.finalName}/app/index.html</file>
        <replacements>
            <replacement>
                <token>
                    <![CDATA[
                    <!-- mergeTo:([^\s]*) -->(.*?)<!-- mergeTo -->
                    ]]>
                </token>
                <value>
                    <![CDATA[
                    <script type="text/javascript" src="$1" ></script>
                    ]]>
                </value>
            </replacement>
    	</replacements>      
        <regexFlags>
            <regexFlag>CASE_INSENSITIVE</regexFlag>
            <regexFlag>DOTALL</regexFlag>
        </regexFlags>
    </configuration>
</plugin>

maven-replacer-pluginは正則的な置換をサポートしてちょうど私の需要を満たして、注意:(1)置換区間の場合、正則「単行」モード、すなわちDOTALL(2)を使用します.yuicompressor-maven-pluginはprepackageで実行されるのでmaven-replacer-pluginのphaseはpackageに変更します
これにより、開発時にjsを増やしてもpom構成を繰り返し変更する必要はありません.もちろん、jsファイルの命名時には、compress時にフィルタリングを容易にするために、一定のルールに従うことが望ましいです.