Maven项目中压缩js和Css代码

项目结构如图

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

我们的目的是将js中的js文件压缩到app.js,css中的base.css和main.css压缩到app.css中，步骤如下：

 

一、引入yuicompressor的依赖

 

<dependency>
      <groupId>com.yahoo.platform.yui</groupId>
      <artifactId>yuicompressor</artifactId>
      <version>2.3.6</version>
      <type>jar</type>
</dependency>

二、引入maven-antrun-plugin插件

<plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-antrun-plugin</artifactId>
      <version>1.3</version>
      <executions>
          <execution>
            <id>compile</id>
            <phase>compile</phase>
            <configuration>
            <tasks>
               <property name="yuicompressor.jar" value="${maven.dependency.com.yahoo.platform.yui.yuicompressor.jar.path}"/>
                <ant antfile="yuicompress.xml" target="clean"/>
             </tasks>
            </configuration>
            <goals>
              <goal>run</goal>
            </goals>
          </execution>
        </executions>
</plugin>

  三、编写ant脚本文件yuicompress.xml

 

<?xml version="1.0" encoding="utf-8"?>
<project name="MyProject" >
     <description>Javascritp build for Ant</description>
     <property name="webapp" location="${basedir}/src/main/webapp"/>
     <property name="css" location="${webapp}/css"/>
    <property name="js" location="${webapp}/js"/>
    <property name="build" location="${js}/build"/>
    <property name="charset" value="utf-8"/>
    
    <!-- - - - - - - - - - - - - - - - - - 
    这个 ant 配置文件要经过4个流程：
    1、target init 进行初始化处理，创建一个目录build，用于暂存文件；
    2、target concat 合并js 文件，放到 build 目录下；
    3、target compress 调用 Yui Compressor 对合并后的 js 进行压缩
    4、target clean 进行清理动作，删除生成的 build 目录
 
    ANT标签和属性解释：
    project 的 default 对应某个 target 的 name 值，表示默认执行哪个步骤；
    target 的 depends 对应其他某些 target 的 name 属性，表示依赖性；
    ${name} 可以引用 property 中定义的值。
    mkdir 标签创建一个目录
    replaceregexp, 正则表达式替换，将DEBUG标识替换为空，在正式环境不处理DEBUG信息
    注意设置文件的 encoding 属性，否则可能有乱码情况
 
    关于ANT的详细文档，请看官方手册：http://ant.apache.org/manual/        
         - - - - - - - - - - - - - - - - - -->
    <target name="init">
        <mkdir dir="${build}" />
    </target>
    
    <target name="concat" depends="init">
    <concat destfile="${build}/all.js" encoding="${charset}" outputencoding="${charset}">
    <fileset dir="${js}">
    	<include name="*.js"/>
    </fileset>
    </concat>
         
     <concat destfile="${build}/all.css" encoding="${charset}" outputencoding="${charset}" >
       	<path path="${css}/base.css"/>
       	<path path="${css}/main.css"/>
     </concat>     
    </target>
    
    <target name="compress" depends="concat">
        <echo message="start compress" />
        <java jar="${yuicompressor.jar}" fork="true" failonerror="false">
        <arg line="--type js --charset ${charset} --nomunge ${build}/all.js -o ${js}/app.js" />
        </java>
        
        <java jar="${yuicompressor.jar}" fork="true" failonerror="false">
        	<arg line="--type css --charset ${charset} ${build}/all.css -o ${css}/app.css" />
        </java>
        <echo message="end compress" />
    </target>
         
    <target name="clean" depends="compress">
        <delete dir="${build}"/>
    </target>
</project>

 四、运行compile命令，在控制台查看输出信息，success表示成功啦