PrimeFaces komprimiert und kombiniert JavaScript und CSS

In diesem Tutorial zeigen wir Ihnen, wie Sie die PrimeFaces-Erweiterungen - Maven-Plugin - verwenden, um JavaScript- und CSS-Dateien zu komprimieren und zu kombinieren, ein Beispiel für die Optimierung von Webressourcen, um das Laden von Websites zu beschleunigen.

Werkzeug getestet:

PrimeFaces 3.3
PrimeFaces-Erweiterungen 0.5
Maven 3.0.3

1. Projektstruktur

Siehe nachfolgende Projektstruktur. Es besteht aus 3 CSS-Dateien und 2 JavaScript-Dateien. Später werden wir diese Dateien komprimieren.

Projektstruktur

2. Ressourcen kopieren

Verwendet `maven-resources-plugin 'zunächst, um alle Ressourcen (js und css) in den Ordner„ target “zu kopieren. Bootstrap-dropdown.js wird jedoch ausgeschlossen.

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

Ressourcen kopieren

Komprimieren und kombinieren

Definieren Sie "resources-optimizer-maven-plugin", um diese Ressourcen zu komprimieren und in einer einzigen Datei zusammenzufassen. Und kopiere zurück in den Quellordner.

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

In diesem Build werden 3 CSS-Dateien komprimiert oder minimiert und zu projectname.aggr.css und JavsScript-Dateien zu` projectname.aggr.js` zusammengefasst

image://wp-content/uploads/2012/08/3-copy-back.png[after-join-copy-back, title = "3-copy-back", width = 509, height = 616

4. Reinigung

Denken Sie vor dem Erstellen daran, die Ressourcen wie " target " und die vorherigen " .aggr " -Dateien zu bereinigen, um doppelten Inhalt zu vermeiden.

<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. Bauen Sie es auf

Fertig, verwendet den Befehl mvn prepar-package , um den Kompressions- und Kombinationsprozess zu starten.

Quellcode herunterladen

Laden Sie die vollständige pom.xml-Verknüpfung herunter://wp-content/uploads/2012/08/pom.xml__.zip[pom.xml.zip](1 KB)

Referenzen

mit Closure Compiler begonnen]. http://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html [Maven

Lebenszyklen aufbauen]

Link://Tag/css/[css]Link://Tag/Javascript/[JavaScript] primefaces

TOC