MavenによるJSおよびCSS資産の縮小
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]にあります。