このチュートリアルでは、PrimeFaces拡張機能(Mavenプラグイン)を使用してJavaScriptとCSSファイルを圧縮して結合する方法、Webリソースの最適化の例を紹介します。
テストされたツール:
-
PrimeFaces 3.3
-
PrimeFaces-Extensions 0.5
-
Maven 3.0.3
1.プロジェクトの構成
次のプロジェクト構造を参照してください。 3つのCSSファイルと2つのJavaScriptファイルで構成されています。後でこれらのファイルを結合して圧縮します。
2.リソースをコピーする
まず、すべてのリソース(jsとcss)を “** target”フォルダにコピーするために
maven-resources-plugin`を使いますが、
bootstrap-dropdown.js`は除外されます。
<properties> <project.theme.name>default</project.theme.name> <project.resources.home.folder> ${project.basedir}/src/main/webapp/resources/${project.theme.name}/ </project.resources.home.folder> <project.resources.build.folder> ${project.build.directory}/temp-resources/${project.theme.name}/ </project.resources.build.folder> </properties> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <version>2.5</version> <executions> <execution> <id>copy-resources</id> <phase>generate-resources</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <outputDirectory>${project.resources.build.folder}/</outputDirectory> <resources> <resource> <directory>${project.resources.home.folder}</directory> <filtering>true</filtering> <includes> <include>** ** /** .css</include> <include>** ** /** .js</include> </includes> <excludes> <exclude>** ** /bootstrap** .js</exclude> </excludes> </resource> </resources> </configuration> </execution> </executions> </plugin>
3.圧縮と結合
`resources-optimizer-maven-plugin`を定義して、これらのリソースを圧縮して一つのファイルにまとめます。そして “source”フォルダにコピーし直してください。
<plugin> <groupId>org.primefaces.extensions</groupId> <artifactId>resources-optimizer-maven-plugin</artifactId> <version>0.5</version> <executions> <execution> <id>optimize</id> <phase>prepare-package</phase> <goals> <goal>optimize</goal> </goals> </execution> </executions> <configuration> <warningLevel>QUIET</warningLevel> <suffix>-min</suffix> <failOnWarning>false</failOnWarning> <resourcesSets> <resourcesSet> <inputDir>${project.resources.build.folder}/css/</inputDir> <includes> <include>** ** /** .css</include> </includes> <aggregations> <aggregation> <removeIncluded>false</removeIncluded> <outputFile> ${project.resources.home.folder}/css/${project.artifactId}.aggr.css </outputFile> </aggregation> </aggregations> </resourcesSet> <resourcesSet> <inputDir>${project.resources.build.folder}/js/</inputDir> <includes> <include>** ** /** .js</include> </includes> <aggregations> <aggregation> <removeIncluded>false</removeIncluded> <outputFile> ${project.resources.home.folder}/js/${project.artifactId}.aggr.js </outputFile> </aggregation> </aggregations> </resourcesSet> </resourcesSets> </configuration> </plugin>
このビルドでは、3つのCSSファイルが圧縮または最小化され、
projectname.aggr.css`とJavsScriptファイルが
projectname.aggr.js`に結合されます。
4.クリーニング
ビルドする前に、重複した内容を避けるために、 ”
target
“フォルダや以前の ”
.aggr
“ファイルなどのリソースをきれいにしておいてください。
<plugin> <artifactId>maven-clean-plugin</artifactId> <version>2.2</version> <executions> <execution> <id>auto-clean</id> <phase>generate-resources</phase> <goals> <goal>clean</goal> </goals> <configuration> <filesets> <fileset> <directory>${project.resources.home.folder}</directory> <includes> <include>** ** /** .aggr.css</include> <include>** ** /** .aggr.js</include> </includes> </fileset> </filesets> </configuration> </execution> </executions> </plugin>
5.ビルドする
Doneは、コマンド `mvn prepare-package`を使用して、圧縮および結合プロセスを開始します。
ソースコードをダウンロードする
完全なpom.xmlをダウンロード – リンク://wp-content/uploads/2012/08/pom.xml__.zip[pom.xml.zip](1 KB)
参考文献
Closure Compilerで始まった]。
http://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html
[Maven
ライフサイクルを構築する]