1概要

この記事では、ビルド手順としてJavascriptおよびCSSアセットを縮小し、その結果得られるファイルをSpring MVCで処理する方法を説明します。

基盤となる縮小ライブラリとしてhttp://yui.github.io/yuicompressor/[YUI Compressor]を、統合するためにhttp://davidb.github.io/yuicompressor-maven-plugin/[YUI Compressor Maven plugin]を使用します私たちの構築プロセスに。


2 Mavenプラグイン設定

まず、

pom.xml

ファイルでコンプレッサープラグインを使用することを宣言し、

compress

ゴールを実行する必要があります。これにより、

src/main/webapp

の下にあるすべての

.js

および

.css

ファイルが圧縮され、

foo.js

が

foo-min.js

に、

myCss.css

が

myCss-min.css

に縮小されます。 

<plugin>
   <groupId>net.alchim31.maven</groupId>
    <artifactId>yuicompressor-maven-plugin</artifactId>
    <version>1.5.1</version>
    <executions>
        <execution>
            <goals>
                <goal>compress</goal>
            </goals>
        </execution>
    </executions>
</plugin>


src/main/webapp directory

には、以下のファイルが含まれています。 

js/├── foo.js
├── jquery-1.11.1.min.js
resources/└── myCss.css


mvn clean package

を実行した後、生成されたWARファイルには次のファイルが含まれます。 

js/├── foo.js
├── foo-min.js
├── jquery-1.11.1.min.js
├── jquery-1.11.1.min-min.js
resources/├── myCss.css
└── myCss-min.css


3ファイル名を同じにする

この段階で、

mvn clean package

を実行すると、

foo-min.js

と

myCss-min.css

がプラグインによって作成されます。ファイルを参照するときは、元々

foo.js

と

myCss.css

を使用していたため、縮小ファイルの名前は元のファイルとは異なるため、このページでは元の非縮小ファイルを使用します。


foo.js/foo-min.js

と

myCss.css/myCss-min.css

が混在しないようにし、ファイル名を変更せずにファイルを縮小するには、

nosuffix

オプションを使用してプラグインを次のように設定する必要があります。 

<plugin>
    <groupId>net.alchim31.maven</groupId>
    <artifactId>yuicompressor-maven-plugin</artifactId>
    <version>1.5.1</version>
    <executions>
        <execution>
            <goals>
                <goal>compress</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <nosuffix>true</nosuffix>
    </configuration>
</plugin>

これで、

mvn clean package

を実行すると、生成されたWARファイルに次のファイルが作成されます。 

js/├── foo.js
├── jquery-1.11.1.min.js
resources/└── myCss.css


4 WARプラグインの設定

ファイル名を同じにしておくと、副作用があります。これにより、WARプラグインは、縮小された

foo.js

ファイルと

myCss.css

ファイルを元のファイルで上書きするので、最終出力に縮小版のファイルは表示されません。縮小前の

foo.js

ファイルには、次の行が含まれています。 

function testing() {
    alert("Testing");
}

生成されたWARファイル内の

foo.js

ファイルの内容を調べると、縮小された内容ではなく元の内容が含まれていることがわかります。この問題を解決するには、コンプレッサプラグインに

webappDirectory

を指定し、WARプラグイン設定内からこれを参照する必要があります。 

<plugin>
    <groupId>net.alchim31.maven</groupId>
    <artifactId>yuicompressor-maven-plugin</artifactId>
    <version>1.5.1</version>
    <executions>
        <execution>
            <goals>
                <goal>compress</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <nosuffix>true</nosuffix>
        <webappDirectory>${project.build.directory}/min</webappDirectory>
    </configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<configuration>
    <webResources>
        <resource>
            <directory>${project.build.directory}/min</directory>
        </resource>
    </webResources>
</configuration>
</plugin>

ここでは、

min

ディレクトリを縮小ファイルの出力ディレクトリとして指定し、これを最終出力に含めるようにWARプラグインを設定しました。

これで、生成されたWARファイルに、元のファイル名

foo.js

と

myCss.cssを含む縮小ファイルが作成されました。

foo.js__を確認して、次の縮小コンテンツがあることを確認できます。 

function testing(){alert("Testing")};


5すでに縮小されたファイルを除外する

サードパーティのJavascriptおよびCSSライブラリには、ダウンロード可能な縮小バージョンがあります。プロジェクトでこれらのいずれかを使用しても、それらを再度処理する必要はありません。

すでに縮小されたファイルを含めると、プロジェクトをビルドするときに警告メッセージが表示されます。

たとえば、

jquery-1.11.1.min.js

はすでに縮小されたJavascriptファイルであるため、ビルド中に次のような警告メッセージが表示されます。 

----[WARNING].../src/main/webapp/js/jquery-1.11.1.min.js[-1:-1]:
Using 'eval' is not recommended. Moreover, using 'eval' reduces the level of compression!
execScript||function(b){a. ---> eval <--- .call(a,b);})[WARNING]...jquery-1.11.1.min.js:line -1:column -1:
Using 'eval' is not recommended. Moreover, using 'eval' reduces the level of compression!
execScript||function(b){a. ---> eval <--- .call(a,b);})
----

プロセスからすでに縮小されたファイルを除外するには、次のように

excludes

オプションを指定してコンプレッサプラグインを設定します。 

<plugin>
    <groupId>net.alchim31.maven</groupId>
    <artifactId>yuicompressor-maven-plugin</artifactId>
    <version>1.5.1</version>
    <executions>
        <execution>
            <goals>
                <goal>compress</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <nosuffix>true</nosuffix>
        <webappDirectory>${project.build.directory}/min</webappDirectory>
        <excludes>
            <exclude>** ** /** .min.js</exclude>
        </excludes>
    </configuration>
</plugin>

これにより、ファイル名が

min.js

で終わるすべてのディレクトリの下にあるすべてのファイルが除外されます。

mvn clean package

を実行しても警告メッセージは表示されず、ビルドはすでに縮小されたファイルを縮小しようとしません。


6. 結論

この記事では、JavaScriptとCSSファイルの縮小化をMavenのワークフローに統合するための優れた方法について説明しました。あなたのSpring MVCアプリケーションでこれらの静的なアセットを提供するには、/spring-mvc-static-resources[Springで静的リソースを提供する]の記事を見てください。

この記事のコードはhttps://github.com/eugenp/tutorials/tree/master/spring-static-resources[GitHub]にあります。