本文介紹通過使用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
參考其他相關資料:http://blog.csdn.net/fengshizty/article/details/50541957