最小化(minify)js文件

最小化(minify)js文件博客分类：

• JavaScript

CSSYUIAjaxjQueryYahoo

在 http://developer.yahoo.com/performance/rules.html#minify

中介绍了有两种最小化js文件的工具。

一种是JSMin http://crockford.com/javascript/jsmin 另一种是 YUI Compressor http://developer.yahoo.com/yui/compressor/
1.JSMin使用很简单 它提供一个在MS-Dos下能直接运行的.exe程序 jsmin.exe 直接运行命令即可:

jsmin jsmin <Ajax.js> ajaxmin.js   Ajax.js是没有最小化的js文件，当中包含很多空格与换行符   ajaxmin.js是被jsmin最小化过的文件 2.首先下载最新版的YUI Compressor

我下载的是2.3.6版 它提供的是Jar架包。 我们也有两种方法使用它。 1)如其\doc\README所说的直接用:   java -jar yuicompressor-x.y.z.jar [options] [input file]   java -jar yuicom*.jar --type js -o ajaxmin.js Ajax.js 2)用ant来操作：   新建一个Java Project :YUI_Compressor   新建一个build.xml

<projectname="YUI_Compressor"default="css.minify"basedir="./..">
        <propertyname="project.dir"value="${basedir}">
        </property>
        <propertyname="project.src.dir"value="${project.dir}\src">
        </property>
        <!-- 最小化css文件 -->
        <targetname="css.minify">
            <javajar="${project.dir}/lib/yuicompressor-2.3.6.jar"fork="true"failonerror="true">
                <argline="${project.src.dir}/index.css"/>
                <argline="-o ${project.src.dir}/indexmin.css"/>
            </java>
        </target>

        <!-- 最小化js文件 -->
        <targetname="js.minify">
            <javajar="${project.dir}/lib/yuicompressor-2.3.6.jar"fork="true"failonerror="true">
                <argline="${project.src.dir}/Ajax.js"/>
                <argline="-o ${project.src.dir}/ajaxmin.js"/>
            </java>
        </target>
        <targetname="css.concat">
            <concatdestfile="${war.dir}/css/my-concat.css">
                <filelistdir="${war.dir}/css/"files="screen.css, specialA.css, spcialB.css"/>
            </concat>
        </target>
        <targetname="js.concat">
            <concatdestfile="${war.dir}/script/my-concat.js">
                <filelistdir="${war.dir}/script/jquery"files="jquery.js, jqueryPlugins.js"/>
                <filelistdir="${war.dir}/script/"files="remote.js, ..., my.js"/>
            </concat>
        </target>
    </project>

<project name="YUI_Compressor" default="css.minify" basedir="./..">
		<property name="project.dir" value="${basedir}">
		</property>
		<property name="project.src.dir" value="${project.dir}\src">
		</property>
		<!-- 最小化css文件 -->
		<target name="css.minify">
			<java jar="${project.dir}/lib/yuicompressor-2.3.6.jar" fork="true" failonerror="true">
				<arg line="${project.src.dir}/index.css" />
				<arg line="-o ${project.src.dir}/indexmin.css" />
			</java>
		</target>
		
		<!-- 最小化js文件 -->
		<target name="js.minify">
			<java jar="${project.dir}/lib/yuicompressor-2.3.6.jar" fork="true" failonerror="true">
				<arg line="${project.src.dir}/Ajax.js" />
				<arg line="-o ${project.src.dir}/ajaxmin.js" />
			</java>
		</target>
		<target name="css.concat">
			<concat destfile="${war.dir}/css/my-concat.css">
				<filelist dir="${war.dir}/css/" files="screen.css, specialA.css, spcialB.css" />
			</concat>
		</target>
		<target name="js.concat">
			<concat destfile="${war.dir}/script/my-concat.js">
				<filelist dir="${war.dir}/script/jquery" files="jquery.js, jqueryPlugins.js" />
				<filelist dir="${war.dir}/script/" files="remote.js, ..., my.js" />
			</concat>
		</target>
	</project>

运行相应的target即可

最后创建出来的文件目录为：     │  .classpath     │  .project     │  list.txt     │      ├─bin     │      Ajax.js     │      ajaxmin.js     │      build.xml     │      index.css     │      indexmin.css     │      yuicompressor-2.3.6.jar     │          ├─lib     │      yuicompressor-2.3.6.jar     │          └─src             Ajax.js             ajaxmin.js             build.xml             index.css             indexmin.css

参考文档:

http://developer.yahoo.com/yui/compressor/

http://www.seamframework.org/Community/SeamPerformanceSomeIdeas