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使用,可实现多文件压缩。