YUICompressor 压缩前端js、css文件

  在项目中，前端的js、css会随着项目周期的增加而变的繁多，浏览器下载效率低且费流量，这时我们可以使用各种压缩工具对其进行压缩

  本文使用的是maven环境，在项目的pom.xml添加：

 

<?xml version="1.0"?>
<project
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"
    xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.xx</groupId>
    <artifactId>xx-xx</artifactId>
    <version>3.0.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>xx-xx</name>

    <properties>
        <!-- 主要依赖库的版本定义 -->       
        <jetty.version>7.6.15.v20140411</jetty.version>

        <java.version>1.6</java.version>
        <!-- Plugin的属性定义 -->
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>       
    </properties>


    <prerequisites>
        <maven>3.0.0</maven>
    </prerequisites>

    <dependencies>
        <!-- 服务依赖 -->   
    </dependencies>

    <build>
        <plugins>
            <!-- compiler插件, 设定JDK版本 -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>${java.version}</source>
                    <target>${java.version}</target>
                    <showWarnings>true</showWarnings>
                </configuration>
            </plugin>
            <!-- war打包插件, 设定war包名称不带版本号 -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.4</version>
                <configuration>
                    <warName>${project.artifactId}</warName>
                    <packagingExcludes>*.shtml</packagingExcludes>
                </configuration>
            </plugin>

            <!-- YUI Comoress配置 -->
            <plugin>
                <groupId>net.alchim31.maven</groupId>
                <artifactId>yuicompressor-maven-plugin</artifactId>
                <version>1.3.0</version>
                <executions>
                    <execution>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>compress</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <!-- 读取js,css文件采用UTF-8编码 -->
                    <encoding>UTF-8</encoding>
                    <!-- 不显示js可能的错误 -->
                    <jswarn>false</jswarn>
                    <!-- 若存在已压缩的文件，会先对比源文件是否有改动 有改动便压缩，无改动就不压缩 -->
                    <force>true</force>
                    <!-- 在指定的列号后插入新行 -->
                    <linebreakpos>-1</linebreakpos>
                    <!-- 压缩之前先执行聚合文件操作 -->
                    <preProcessAggregates>true</preProcessAggregates>
                    <!-- 压缩后保存文件后缀 -->
                    <suffix></suffix>
                    <nosuffix>true</nosuffix>
                    <disableOptimizations>false</disableOptimizations>
                    <!-- 源目录，即需压缩的根目录 -->
                    <sourceDirectory>${basedir}/src/main/webapp/static</sourceDirectory>
                    <includes>
                        <include>js/*.js</include>
                        <include>css/*.css</include>
                    </includes>
                    <outputDirectory>${basedir}/target/compress</outputDirectory>

                    <!-- 合并:如果不合并，则可以不配置该项 -->
                    <aggregations>
                        <aggregation>
                            <!-- 合并每一个文件后插入一新行 -->
                            <insertNewLine>true</insertNewLine>
                            <!-- 需合并文件的根文件夹 -->
                            <inputDir>${basedir}/src/main/webapp/mergejscss</inputDir>
                            <!-- 最终合并的输出文件 -->
                            <output>${basedir}/src/main/webapp/mergejscss/js/merge.js
                            </output>
                            <!-- 把以下js文件合并成一个js文件，是按顺序合并的 -->
                            <includes>
                                <include>js/xx.js</include>
                            </includes>
                        </aggregation>
                        <aggregation>
                            <!-- 合并每一个文件后插入一新行 -->
                            <insertNewLine>true</insertNewLine>
                            <!-- 需合并文件的根文件夹 -->
                            <inputDir>${basedir}/src/main/webapp/mergejscss</inputDir>
                            <!-- 最终合并的输出文件 -->
                            <output>${basedir}/src/main/webapp/mergejscss/css/merge.css</output>
                            <!-- 把以下css文件合并成一个css文件，是按顺序合并的 -->
                            <includes>
                                <include>css/xx.css</include>
                            </includes>
                        </aggregation>
                    </aggregations>
                </configuration>
            </plugin>

            <!-- jetty插件 -->
            <plugin> 
                <groupId>org.mortbay.jetty</groupId> 
                <artifactId>jetty-maven-plugin</artifactId> 
                <version>8.0.0.RC0</version> 
                <configuration> 
                    <scanIntervalSeconds>0</scanIntervalSeconds>
                    <webAppConfig>
                        <contextPath>/</contextPath>
                        <!--
                        <descriptor>${project.basedir}/src/test/resources/web-test.xml</descriptor>
                         -->
                    </webAppConfig>
                    <!--
                    <classesDirectory>${project.basedir}/target/classes</classesDirectory>
                    <testClassesDirectory>${project.basedir}/target/test-classes</testClassesDirectory>
                    <useTestClasspath>true</useTestClasspath>
                    -->
                    <webAppSourceDirectory>${project.basedir}/src/main/webapp</webAppSourceDirectory>
                    <connectors>
                    <connector implementation="org.eclipse.jetty.server.nio.SelectChannelConnector">
                        <port>80</port>
                        <maxIdleTime>60000</maxIdleTime>
                    </connector>
                    </connectors>
                </configuration> 
            </plugin>
        </plugins>
    </build>
</project>

 2、使用maven命令

      只压缩：mvn yuicompressor:compress

      打包自动压缩：mvn package -Dmaven.test.skip=true -U

 

注意：如果js文件中带有js调试断言：debugger; 是无法打包压缩成功的，可以使用eval('debugger');代替。