PrimeFaces压缩并结合JavaScript和CSS

最新推荐文章于 2020-07-14 18:24:37 发布

cyan20115

最新推荐文章于 2020-07-14 18:24:37 发布

阅读量170

点赞数

文章标签： javascript java ViewUI

在本教程中，我们将向您展示如何使用PrimeFaces扩展程序-Maven插件来压缩和合并JavaScript和CSS文件（一个Web资源优化示例），以使网站加载速度更快。

经过测试的工具：

PrimeFaces 3.3
PrimeFaces-扩展0.5
Maven的3.0.3

注意
本指南是示例驱动的，有关详细说明以及所有其他插件标签和选项，请访问此优秀指南– PrimeFaces – Closure Compiler入门。

1.项目结构

请参阅以下项目结构。它包含3个CSS文件和2个JavaScript文件。稍后我们将合并这些文件进行压缩。

2.复制资源

首先，使用maven-resources-plugin将所有资源（js和css）复制到“ target ”文件夹中，但是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将这些资源压缩并将其合并到一个文件中。并复制回“源”文件夹。

<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>