色彩  行业  ECHO  or  奇偶  播放器  用户  Smarty

您所在的位置:小祥子 » 编程 » JavaScript » 正文

使用Ant和YUICompressor链接合并压缩你的JS和CSS代码

时间:2015-08-11 编辑:manfredHu 来源:CnBlogs

JS代码和CSS代码在上线前要压缩大家应该都是知道的了。记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴。

当时就在想:TMD有没有好一点的方法,劳资不想老是用Ctrl大法。啊啊啊啊啊啊啊啊阿~。最最坑爹的是,有时候将代码复制粘贴的时候手一抖可能就删了点什么东西,手一快又保存了,反正各种坑爹。坑到没朋友。

但是呢,不压缩也不是是吧?


 在写JS代码渐渐多了起来的时候就发现手动压缩根本不是长远的方法。而且JS的代码也开始分块,分功能,分文件写了,尽量去做到复用。

在实际项目中,推荐的是一个html对应一个JS文件和一个CSS文件。这样做可以减少HTTP请求,众所周知,一个HTTP请求的延迟远比下载一个大点的文件大得多。

所以从

程序员来看:我要分文件,分模块写。不然代码太混乱了。(多文件)

客户(网站的使用者)来看:我要良好的用户体验,越快越好。(少文件,文件一多HTTP请求会很多)

这就产生了冲突,不过有需求就有市场,我们聪明的前端攻城狮也有自己的方法解决。——链接文件与压缩大法,也就是标题“使用Ant和YUICompressor链接合并压缩你的JS和CSS代码”。


Ant,中文翻译过来就是“蚂蚁”。嗯嗯这是Apache的一个项目,基于Java的build工具,可以将一些项目的代码文件合并或者复制。具体的东东可以自行Google或者Baidu

官网:http://ant.apache.org/

YUICompressor,雅虎公司的一个代码压缩工具,貌似压缩比例也挺高的。网上一搜一堆的在线压缩网站有的也是这个做得。也是基于Java的。


第一步:配Java环境

这一步就跳过吧,这么简单是吧?Ant和YUICompressor都是基于Java来做得,不懂得自行Google或者Baidu,这里说的是环境变量那里的配置。不是Eclipse里面的。嗯我知道你们想到了-_-!!。估计很多都配过了就不多说了。


第二步:创建项目

Eclipse下创建一个新的项目,Dynamic Web Project。打开Project Explorer窗口(window->show View)

如图所示,我建立了一个AntTest项目,然后在WebContent下面建立了三个文件夹,

  1. build 这个文件夹是用来放链接合并和压缩工具的
  2. build_output 这个文件夹是用来放项目上线的前端代码和页面的
  3. web 这个是用来放一些代码的各个未链接压缩的部分的,平常编辑代码的话就在这个文件夹下面编辑和修改

第三步:创建具体文件

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" border="0" onload="return imgzoom(this,600);"/>

这张图是web文件夹下面的具体的文件模块,其实jQuery有一些模块没用到的话可以拆开加载的。


第四步:放置工具文件到build文件夹里面

这是Ant和YUICompressor的文件夹。直接解压放里面就可以。

Ant的话也要配环境的,比如下面的

ANT_HOME    D:/ apache-ant-1.9.0

path             D:/ apache-ant-1.9.0/bin

classpath      D:/apache-ant-1.9.0/lib

具体的路径放的不一样每台电脑都不同,可以看http://jingyan.baidu.com/article/e2284b2b45d193e2e6118dc6.html或者自行解决。


第五步:设置配置文件build.xml

我们这里是用

 <?xml version="1.0" encoding="UTF-8"?>
  
 <project default="compress" basedir="D:\eclipseWorkSpace\AntTest\WebContent\web" name="core">
     <!-- 项目的 web 路径,也就是我们修改代码的那个web文件夹的路径 -->
     <property name="path" value="D:\eclipseWorkSpace\AntTest\WebContent\web" />
     <!-- 部署的输出路径 也就是项目的链接合并压缩的输出文件夹的路径-->
     <property name="targetDir" value="D:\eclipseWorkSpace\AntTest\WebContent\build_output\asset" />
     <!-- 源文件路径(src) -->
     <property name="code.src" value="src" />
     <property name="baseService" value="baseService" />
     <!-- !!! YUI Compressor 路径 !!! -->
     <property name="yuicompressor" value="D:\eclipseWorkSpace\AntTest\WebContent\build\yuicompressor-2.4.6\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar"/>
          
     <!-- ================================= 
          target: concat 拼接(合并)文件        
     ================================= -->
           
     <target name="concat" depends="" description="concat code">
         <echo message="Concat Code Files Begin!!!" />
         <!-- 需要注意这里的拼接顺序depends是优先链接合并的文件,也就是依赖的意思 --><!-- JS -->
         <concat destfile="${targetDir}/js/source/all.js" encoding="utf-8" fixlastline="on">
             <fileset dir="${code.src}/js" includes="jquery-1.5.1.js" />
             <fileset dir="${code.src}/js" includes="jquery.ui.core.js" />
             <fileset dir="${code.src}/js" includes="jquery.ui.widget.js" />
             <fileset dir="${code.src}/js" includes="jquery.ui.draggable.js" />
             <fileset dir="${code.src}/js" includes="jquery.ui.droppable.js" />
             <fileset dir="${code.src}/js" includes="jquery.ui.button.js" />
             <fileset dir="${code.src}/js" includes="jquery.ui.dialog.js" />
             <fileset dir="${code.src}/js" includes="jquery.ui.accordion.js" />
             <fileset dir="${code.src}/js" includes="jquery.ui.autocomplete.js" />
         </concat>
         <!-- CSS -->
         <concat destfile="${targetDir}/css/source/all.css" encoding="utf-8">
             <fileset dir="${code.src}/css" includes="jquery.ui.core.css" />
             <fileset dir="${code.src}/css" includes="jquery.ui.button.css" />
             <fileset dir="${code.src}/css" includes="jquery.ui.dialog.css" />
             <fileset dir="${code.src}/css" includes="jquery.ui.accordion.css" />
             <fileset dir="${code.src}/css" includes="jquery.ui.autocomplete.css" />
         </concat>
  
         <echo message="Concat Code Files Finished!!!" />
     </target>
  
     <!-- ================================= 
           target: copy 拷贝文件 
          ================================= -->
  
     <target name="copy_asset" depends="concat" description="copy the asset file">
         <echo message="Copy Asset Begin" />
         <!-- main.html -->
         <copy todir="${targetDir}/../" overwrite="true">
             <fileset dir="${path}/" includes="*.html"/>
         </copy>
         <!-- img *.png -->
         <copy todir="${targetDir}/img" overwrite="true">
             <fileset dir="${path}/asset/img" includes="*.png" />
         </copy>
  
         <echo message="Copy Asset Finished" />
     </target>
  
  
     <!-- ================================= 
           target: compress 压缩 js && css  
          ================================= -->
  
     <target name="compress" depends="copy_asset" description="compress code">
         <echo message="Compress Code Begin" />
  
         <apply executable="java" parallel="false" failonerror="true" dest="${targetDir}/js">
             <fileset dir="${targetDir}/js/source" includes="*.js"/>
             <arg line="-jar"/>
             <arg path="${yuicompressor}" />
             <arg line="--charset utf-8" />
             <arg line="-o" />
             <targetfile/>
             <mapper type="glob" from="*.js" to="*.js" />
         </apply>
          
         <apply executable="java" parallel="false" failonerror="true" dest="${targetDir}/css">
             <fileset dir="${targetDir}/css/source" includes="*.css"/>
             <arg line="-jar"/>
             <arg path="${yuicompressor}" />
             <arg line="--charset utf-8" />
             <arg line="-o" />
             <targetfile/>
             <mapper type="glob" from="*.css" to="*.css" />
         </apply>
  
         <echo message="Compress Code Finished" />
  
         <echo message="Clean Begin" />
  
         <!--<delete verbose="false" failonerror="true">
             <fileset dir="${path}" includes="${targetDir}/*-o.js" />
         </delete> -->
  
         <echo message="Clean Finished" />
  
     </target>
 </project>

在命令提示符(CMD)下用ant的指令运行(别告诉我你不会。。。。。),学过Java的应该都懂的,javac嘛,一个道理:

其实到这里大概流程就差不多了,但是呢,懒人总有偷懒的方法,上面还要打命令提示符,啊啊啊啊啊啊啊啊~

然后,自己做了个简单的批处理文件。


第六步:创建build.bat批处理文件自动执行ant指令

鼠标右键新建一个txt文件,然后打入

这里build.bat和build.xml是放在同一个路径下的。所以可以这样直接调用指令,如果你想放在别的地方是要改路径的。

然后保存,后缀txt改成bat就可以了。

以后,修改完代码之后按下build.bat键盘F3(Eclipse打开文件快捷键)就可以链接合并压缩你的JS和CSS代码了。

当然,如果你不想压缩只想合并的话呢,把build.xml压缩那块删了就可以了。


上面这样做其实还是有一些小问题的,后台开发人员如果要去设置路径映射那些的话其实是要去build_output文件夹下面做的,因为这个文件夹才是页面真正的地址(代码已被合并压缩)。

记得跟他们说一下就好了。

作者:manfred Hu

博客:http://www.cnblogs.com/manfredHu

本文地址:http://www.cnblogs.com/manfredHu/p/4719606.html

项目分享:http://yunpan.cn/cdPU8mrHYRLrd  访问密码 d1ba

转载请注明出处谢谢!!!

关键词:or 合并 JS CSS 代码