js,css压缩入门

序：最近接触电商项目，当项目逐渐壮大的时候，前端的请求加载流量也逐渐的上升。js,css压缩就提上了日程。

一、知识储备：

1.YUI COMPRESSOR

http://yui.github.io/yuicompressor/

2.ANT

http://ant.apache.org/

二、实现概要

1.下载 YUI compressor 的jar包，放到工程lib目录下

2.安装eclipse ant插件

3.写ant插件使用的build.xml

demo:

<?xml version="1.0" encoding="UTF-8"?>

<project name="Javascript_build" default="clean" basedir="./">

　　<description>Javascript build for Ant</descrition>

　　<property name="src" location="WebContent/skins"/>

　　<property name="build" location="WebContent/build"/>

　　<property name="target" location="WebContent/skins"/>

　　<property name="lib" location="WebContent/lib/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属性，否则可能有乱码情况

　　-->

　　<target name="init">

　　　　<mkdir dir="${build}"/>

　　</target>

　　<target name="concat" depends="init">

　　</target>

　　<target name="compress" depends="concat">

　　　　<echo message="start compress"/>

　　　　<java jar="${lib}/yuicompressor-2.4.6.jar" fork="true" failonerror="true">

　　　　　　<arg line="--type js --charset ${charset} '${src}/order.js' -o '${src}/order.min.js'"/>

　　　　</java>

　　　　<java jar="${lib}/yuicompressor-2.4.6.jar" fork="true" failonerror="true">

　　　　　　<arg line="--type css --charset ${charset} '${src}/order.css' -o '${src}/order.min.css'"/>

　　　　</java>

　　　　<apply executable="java" parallel="false" failonerror="true">

　　　　　　<fileset dir="${src}/js/" includes="**/*.js" />

　　　　　　<arg line="-jar"/>

　　　　　　<arg path="${lib}/yuicompressor-2.4.6.jar"/>

　　　　　　<arg line="--charset ${charset}"/>

　　　　　　<srcfile/>

　　　　　　<arg line="-o"/>

　　　　　　<mapper type="glob" from="*.js" to="${build}/js/*.js"/>

　　　　　　<targetfile/>

　　　　</apply>

　　　　<echo message="end compress"/>

　　</target>

　　<target name="clean" depends="compress">

　　</target>

</project>

4.eclipse中右键build.xml  ->Run As->Ant Build

三、结束语

YUI COMPRESSOR只支持单文件压缩;配合Ant使用，可实现多文件压缩。