使用yuicompressor-maven-plugin壓縮js及css檔案

沒頭腦的土豆發表於2013-07-08
UIMavenPluginJSCSS

本文介紹通過使用yuicompressor-maven-plugin外掛實現js及css程式碼的自動壓縮，方便整合到持續整合環境中，如jenkins。

一、配置yuicompressor-maven-plugin

在pom檔案中增加該外掛的定義，示例如下：

    <plugin>
        <groupId>net.alchim31.maven</groupId>
        <artifactId>yuicompressor-maven-plugin</artifactId>
        <version>1.3.0</version>
        <executions>
            <execution>
                <goals>
                    <goal>compress</goal>
                </goals>
            </execution>
        </executions>
        <configuration>
            <encoding>UTF-8</encoding>
        <!-- 忽略 js 錯誤警告 -->
            <jswarn>false</jswarn>
            <nosuffix>true</nosuffix>
            <linebreakpos>-1</linebreakpos>
            <includes>
                <include>js/**/*.js</include>
                <include>css/**/*.css</include>
            </includes>
            <excludes>
                <exclude>**/**min.js</exclude>
                <exclude>js/ba/**/*.js</exclude>
            </excludes>
        </configuration>

</plugin>

1、execution表示執行的操作，可以指定操作在maven的哪個生命週期執行，不同的生命週期對打包操作會有影響，如配置在compile階段執行壓縮：

    <executions>
        <execution>
        <phase>compile</phase>
            <goals>
                <goal>compress</goal>
            </goals>
        </execution>
    </executions>

2、經驗證發現該外掛執行時所在的位置是專案編譯打包的輸出路徑，比如專案名稱為abc，當前資料夾應為project_root/target/abc。maven在打包的時候會把所有編譯的檔案、webapp下的檔案複製到該目錄中為打包做準備。

3、include節點用於配置需要壓縮的檔案路徑，可以使用萬用字元，*表示一個檔案或路徑名，**表示多個檔案或路徑名，exclude節點用於配置排除壓縮的檔案路徑，exclude只會排除include中設定的路徑下的檔案或路徑。

二、配置maven-war-plugin

    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <configuration>
            <warName>${artifactId}</warName>
            <warSourceExcludes>js/**/*.js,css/**/*.css</warSourceExcludes>
        </configuration>
    </plugin>

在配置過程中發現無論將phase設定為哪個階段，最終打包的檔案總是原始檔案，並未被壓縮，後來測試發現maven-war-plugin會自動把webapp目錄下的檔案複製到輸出路徑，因此可以通過warSourceExcludes配置排除複製,的檔案或路徑，如上例中指定排除js目錄下的所有js檔案，css目錄下的所有css檔案。

三、常見錯誤

壓縮js檔案時，如果程式碼中包含debugger，yuicompressor會認為其為保留關鍵字，註釋或刪除可以使打包正常進行，也可以使用eval('debugger')替換debugger。

[ERROR] ...\src\main\webapp\js\Scroll.js:line 371:column 11:identifier is a reserved word debugger;

[ERROR] ...\src\main\webapp\js\Scroll.js:line 1:column 0:Compilation produced 1 syntax errors.

四、相關資料

外掛主站地址：http://alchim.sourceforge.net/yuicompressor-maven-plugin/

外掛配置引數：http://alchim.sourceforge.net/yuicompressor-maven-plugin/compress-mojo.html#resources

配置示例：http://www.myexception.cn/operating-system/427170.html

相關文章