日期:2014-05-17  浏览次数:20614 次

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