Maven项目中压缩js和Css代码

来源:互联网 发布:sql 字符串拼接 编辑:程序博客网 时间:2024/04/24 10:03

项目结构如图


我们的目的是将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.<a target=_blank href="http://biancheng.dnbcw.info/apache/" style="color: rgb(0, 102, 204); text-decoration: none;">apache</a>.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, <a target=_blank href="http://biancheng.dnbcw.info/zhengzebiaodashi/" style="color: rgb(0, 102, 204); text-decoration: none;">正则表达式</a>替换,将DEBUG标识替换为空,在正式环境不处理DEBUG信息    注意设置文件的 encoding 属性,否则可能有乱码情况     关于ANT的详细文档,请看官方手册:http://ant.<a target=_blank href="http://biancheng.dnbcw.info/apache/" style="color: rgb(0, 102, 204); text-decoration: none;">apache</a>.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" />        <<a target=_blank href="http://biancheng.dnbcw.info/java/" style="color: rgb(0, 102, 204); text-decoration: none;">java</a> jar="${yuicompressor.jar}" fork="true" failonerror="false">        <arg line="--type js --charset ${charset} --nomunge ${build}/all.js -o ${js}/app.js" />        </<a target=_blank href="http://biancheng.dnbcw.info/java/" style="color: rgb(0, 102, 204); text-decoration: none;">java</a>>                <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表示成功啦

0 0
原创粉丝点击