yui壓縮JS和CSS文件

 

　　CSS和JS文件經常需要壓縮，比如我們看到的XX.min.js是經過壓縮的JS。

　　壓縮文件第一個是可以減小文件大小，第二個是對於JS文件，默認會去掉所有的注釋，而且會去掉所有的分號，也會將我們的一些參數替換為一些簡單的a,b之類的變量，從界面看起來非常難閱讀，起到加密作用。

　　常見的有好多壓縮工具，這里使用yui進行壓縮，首先需要下載yui的包:　　yuicompressor-2.4.7.jar  ,可以到我的服務器下載:http://qiaoliqiang.cn/fileDown/yuicompressor-2.4.7.zip

 

1.查看yui使用幫助:

G:\>java -jar yuicompressor-2.4.7.jar

Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

Global Options
  -h, --help                Displays this information
  --type <js|css>           Specifies the type of the input file
  --charset <charset>       Read the input file using <charset>
  --line-break <column>     Insert a line break after the specified column number
  -v, --verbose             Display informational messages and warnings
  -o <file>                 Place the output into <file>. Defaults to stdout.
                            Multiple files can be processed using the following syntax:
                            java -jar yuicompressor.jar -o '.css$:-min.css' *.css
                            java -jar yuicompressor.jar -o '.js$:-min.js' *.js

JavaScript Options
  --nomunge                 Minify only, do not obfuscate
  --preserve-semi           Preserve all semicolons
  --disable-optimizations   Disable all micro optimizations

If no input file is specified, it defaults to stdin. In this case, the 'type'
option is required. Otherwise, the 'type' option is required only if the input
file extension is neither 'js' nor 'css'.

 

 

2.壓縮JS:

　　默認會去掉所有的注釋，而且會去掉所有的分號，也會將我們的一些參數替換為一些簡單的a,b之類的變量，起到加密作用。

JS內容:

/**
 * 驗證密碼和賬戶
 */
function validate2(username, password) {
    if (username != "zhangsan") {
        alert("userName is error:" + c)
    }
    if (password != "123456") {
        alert("password is error:" + d)
    }
};

 

源文件大小:220字節

 

 

 進行壓縮:

G:\>java -jar yuicompressor-2.4.7.jar index.js -v -o index-min.js --charset UTF-8

參數解釋:

index.js  需要壓縮的源文件
-v -o 顯示信息與指定輸出文件名字
index-min.js   壓縮后的文件
--charset  指定編碼格式

 

 壓縮后文件內容和大小:(被壓縮成一行，注釋被去掉，分號也被去掉)

function validate2(b,a){if(b!="zhangsan"){alert("userName is error:"+c)}if(a!="123456"){alert("password is error:"+d)}};

 

 大小為:120字節

 

 

我們也可以保留分號:    --preserve-semi 參數

G:\>java -jar yuicompressor-2.4.7.jar index.js -v --preserve-semi -o index-min.js --charset UTF-8

[WARNING] The symbol c is declared but is apparently never used.
This code can probably be written in a more compact way.
username!="zhangsan"){alert("userName is error:"+ ---> c <--- );}if(password!="123456"){

[WARNING] The symbol d is declared but is apparently never used.
This code can probably be written in a more compact way.
password!="123456"){alert("password is error:"+ ---> d <--- );}}

 

壓縮后內容:

function validate2(b,a){if(b!="zhangsan"){alert("userName is error:"+c);}if(a!="123456"){alert("password is error:"+d);}}

 

 

 

 3.壓縮CSS

G:\>java -jar yuicompressor-2.4.7.jar index.css -v -o index1-min.css --charset UTF-8

 

 

 

也可以寫成bat腳本進行壓縮JS和css，此處就不寫了。

 

 

接下來研究Java中調用yui壓縮JS和css。原理是Java調用RuntTime執行cmd中的一些命令，只是寫了個for循環遍歷文件夾下main的css和js文件進行遍歷。同樣依賴上面的jar包:

工具類如下:

package zdComputerTest;


import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.List;

/**
 * 通過yuicompressor壓縮JS|CSS文件工具類
 * @author Administrator
 *
 */
public class CompressUtils {
    private static final String encoding = "utf-8";
    private static final String[] suffixArray = { ".js", ".css" };

    public static void main(String[] args) {
        String yuiPath = "G:/yuicompressor-2.4.7.jar";
        String filePath = "G:/js";

        compressFile(yuiPath, filePath);
    }

    /**
     * 壓縮指定文件夾下所有的js/css
     * 
     * @param yuiPath
     *            yuicompressor-2.4.7.jar文件路徑
     * @param filePath
     *            要壓縮的文件夾路徑
     */
    public static void compressFile(String yuiPath, String filePath) {
        File file = new File(filePath);
        List<String> commondList = new ArrayList<String>();
        initCommondList(yuiPath, commondList, file);
        excuteCompress(commondList);
    }

    /**
     * 執行壓縮命令
     * @param commondList
     */
    private static void excuteCompress(List<String> commondList) {
        Runtime runTime = Runtime.getRuntime();
        Date startTime = new Date();
        Long count = 0L;
        for (String cmd : commondList) {
            try {
                System.out.println(cmd);
                runTime.exec(cmd);
                count++;
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        Date endTime = new Date();
        Long cost = endTime.getTime() - startTime.getTime();
        System.out.println("壓縮完成，耗時：" + cost + "ms，共壓縮文件個數：" + count);
    }

    /**
     * 初始化壓縮命令
     * @param yuiPath
     * @param commondList
     * @param file
     */
    private static void initCommondList(String yuiPath,
            List<String> commondList, File file) {
        if (file.isDirectory()) {
            File[] files = file.listFiles();
            // 如果某個文件夾是空文件夾，則跳過
            if (files == null) {
                return;
            }
            for (File f : files) {
                initCommondList(yuiPath, commondList, f);
            }
        } else {
            String fileName = file.getName();
            String suffix = fileName.substring(fileName.lastIndexOf("."),
                    fileName.length());

            List<String> suffixList = Arrays.asList(suffixArray);
            if (suffixList.contains(suffix)
                    && !fileName.endsWith("-min" + suffix)) {
                StringBuffer sb = new StringBuffer();
                sb.append("java -jar ");
                sb.append(yuiPath);
                sb.append(" --type ");
                sb.append(suffix.substring(suffix.indexOf(".") + 1));
                sb.append(" --charset ");
                sb.append(encoding).append(" ");
                sb.append(file.getPath()).append(" ");
                sb.append("-o").append(" ");
                sb.append(file.getPath().replace(suffix, "-min" + suffix));

                commondList.add(sb.toString());
            }

        }
    }
}

 

4.Ant整合yui壓縮JS的腳本

項目結構:

 

 build.xml腳本:(此腳本可以編譯項目中的src下的文件和壓縮JS和CSS)

<project name="exam" default="js-css-compress" basedir=".">
    <!--import properties -->
    <property file="build.properties">
    </property>

    <path id="exam.lib">
        <fileset dir="${tomcatPath}/lib">
            <include name="*.jar" />
        </fileset>
        <fileset dir="${basedir}/WebContent/WEB-INF/lib">
            <include name="*.jar" />
        </fileset>
    </path>

    <target name="testTarget">
        <echo message="${examJsRootPath}" />
    </target>

    <target name="cleanExamBuildFolder">
        <delete dir="${basedir}/dist/examBuildClass" />
        <delete dir="${basedir}/dist/examJavaCodeJar" />
        <echo message="delete  ${basedir}/dist/examBuildClass and ${basedir}/dist/examJavaCodeJar "/>

        <mkdir dir="${basedir}/dist/examBuildClass" />
        <mkdir dir="${basedir}/dist/examJavaCodeJar" />
        <echo message="mkdir ${basedir}/dist/examBuildClass and ${basedir}/dist/examJavaCodeJar "/>
    </target>

    <!--編譯項目中的源代碼-->
    <target name="buildSrcCode" depends="cleanExamBuildFolder">
        <javac encoding="utf-8" srcdir="${basedir}/src" excludes="cn/xm/exam/test/**" destdir="${basedir}/dist/examBuildClass" classpathref="exam.lib" includeAntRuntime="false" fork="true">
            <compilerarg line="-encoding UTF-8 " />
        </javac>
        <echo message="編譯成功" level="info"/>
    </target>

    <!--打包編譯后的classes文件-->
    <target name="jarSrcCode" depends="buildSrcCode">
        <jar destfile="${basedir}/dist/examJavaCodeJar/${jarName}-${jarNumber}.jar" basedir="${basedir}/dist/examBuildClass" includes="**/*.class" excludes="**/Test.class">
        </jar>
        <echo message="jar success!"/>

        <delete dir="${basedir}/dist/examBuildClass" />
        <echo message="delete  ${basedir}/dist/examBuildClass"/>
    </target>

    <target name="js-css-compress">
        <java jar="dist/lib/yuicompressor-2.4.7.jar" fork="true" maxmemory="128m">
            <arg value="--charset" />
            <arg value="UTF-8" />
            <arg value="${examJsRootPath}/examParper/examPaper/examparperManage.js" />
            <arg value="-o" />
            <arg value="${examJsRootPath}/examParper/examPaper/examparperManage.min.js" />
        </java>
        <echo message="${examJsRootPath}/examParper/examPaper/examparperManage.js compressed succes"/>

        <java jar="dist/lib/yuicompressor-2.4.7.jar" fork="true" maxmemory="128m">
            <arg value="--charset" />
            <arg value="UTF-8" />
            <arg value="${examJsRootPath}/examParper/addExamparper/index3question.js" />
            <arg value="-o" />
            <arg value="${examJsRootPath}/examParper/addExamparper/index3question.min.js" />
        </java>
        <echo message="${examJsRootPath}/examParper/addExamparper/index3question.js compressed succes"/>

        <java jar="dist/lib/yuicompressor-2.4.7.jar" fork="true" maxmemory="128m">
            <arg value="--charset" />
            <arg value="UTF-8" />
            <arg value="${examJsRootPath}/examParper/exam/addExam.js" />
            <arg value="-o" />
            <arg value="${examJsRootPath}/examParper/exam/addExam.min.js" />
        </java>
        <echo message="${examJsRootPath}/examParper/exam/addExam.js compressed succes"/>

        <java jar="dist/lib/yuicompressor-2.4.7.jar" fork="true" maxmemory="128m">
            <arg value="--charset" />
            <arg value="UTF-8" />
            <arg value="${examJsRootPath}/examParper/exam/updateExam.js" />
            <arg value="-o" />
            <arg value="${examJsRootPath}/examParper/exam/updateExam.min.js" />
        </java>
        <echo message="${examJsRootPath}/examParper/exam/updateExam.js compressed succes"/>

        <java jar="dist/lib/yuicompressor-2.4.7.jar" fork="true" maxmemory="128m">
            <arg value="--charset" />
            <arg value="UTF-8" />
            <arg value="${examJsRootPath}/outDepart/outdepartEmpAndBreakRulesInfoManager.js" />
            <arg value="-o" />
            <arg value="${examJsRootPath}/outDepart/outdepartEmpAndBreakRulesInfoManager.min.js" />
        </java>
        <echo message="${examJsRootPath}/outDepart/outdepartEmpAndBreakRulesInfoManager.js compressed succes"/>

    </target>
</project>

 

 build.properties

tomcatPath=E:/tomcat/apache-tomcat-7.0.72
jarName=commons-exam-code
jarNumber=1.0.1
examJsRootPath=${basedir}/WebContent/js