转载自:http://matychen.iteye.com/blog/1477350

项目采用maven构建的时候,需要压缩js,css等,网上找了相关资料,自己综合了下~ 



直接放代码:

  1. <!-- js压缩 -->
  2. <plugin>
  3. <groupId>net.alchim31.maven</groupId>
  4. <artifactId>yuicompressor-maven-plugin</artifactId>
  5. <version>1.3.0</version>
  6. <executions>
  7. <execution>
  8. <phase>install</phase>
  9. <goals>
  10. <goal>compress</goal>
  11. </goals>
  12. <configuration>
  13. <excludes>
  14. <exclude>**/*.min.js</exclude>
  15. <exclude>**/*-min.js</exclude>
  16. </excludes>
  17. <nosuffix>true</nosuffix>
  18. <linebreakpos>-1</linebreakpos>
  19. </configuration>
  20. </execution>
  21. </executions>
  22. </plugin>
  23. <!-- native2ascii -->
  24. <plugin>
  25. <groupId>org.codehaus.mojo</groupId>
  26. <artifactId>native2ascii-maven-plugin</artifactId>
  27. <version>1.0-beta-1</version>
  28. <executions>
  29. <execution>
  30. <phase>install</phase>
  31. <goals>
  32. <goal>native2ascii</goal>
  33. </goals>
  34. <configuration>
  35. <workDir>${project.build.directory}/${project.build.finalName}</workDir>
  36. <excludes>
  37. <exclude>**/*.css</exclude>
  38. </excludes>
  39. <includes>
  40. <include>resources/js/*.js</include>
  41. </includes>
  42. </configuration>
  43. </execution>
  44. </executions>
  45. </plugin>

更喜欢采用谷歌的closure-compiler + maven-antrun-plugin

  1. <plugin>
  2. <groupId>org.apache.maven.plugins</groupId>
  3. <artifactId>maven-dependency-plugin</artifactId>
  4. <version>2.4</version>
  5. <executions>
  6. <execution>
  7. <phase>validate</phase>
  8. <goals>
  9. <goal>copy</goal>
  10. </goals>
  11. <configuration>
  12. <artifactItems>
  13. <artifactItem>
  14. <groupId>com.google.javascript</groupId>
  15. <artifactId>closure-compiler</artifactId>
  16. <version>r1810</version>
  17. <type>jar</type>
  18. <overWrite>true</overWrite>
  19. <outputDirectory>${project.build.directory}/compressor</outputDirectory>
  20. <destFileName>closure-compiler.jar</destFileName>
  21. </artifactItem>
  22. <artifactItem>
  23. <groupId>com.yahoo.platform.yui</groupId>
  24. <artifactId>yuicompressor</artifactId>
  25. <version>2.4.6</version>
  26. <type>jar</type>
  27. <overWrite>true</overWrite>
  28. <outputDirectory>${project.build.directory}/compressor</outputDirectory>
  29. <destFileName>yuicompressor.jar</destFileName>
  30. </artifactItem>
  31. </artifactItems>
  32. </configuration>
  33. </execution>
  34. </executions>
  35. </plugin>
  36. <plugin>
  37. <groupId>org.apache.maven.plugins</groupId>
  38. <artifactId>maven-antrun-plugin</artifactId>
  39. <version>1.7</version>
  40. <executions>
  41. <execution>
  42. <phase>install</phase>
  43. <goals>
  44. <goal>run</goal>
  45. </goals>
  46. <configuration>
  47. <tasks>
  48. <echo message="开始压缩 JS 文件. 请耐心等待!" />
  49. <property name="yuicompressor" value="${project.build.directory}/compressor/yuicompressor.jar" />
  50. <property name="closure-compiler" value="${project.build.directory}/compressor/closure-compiler.jar" />
  51. <property name="css.compress.directory" value="${project.build.directory}/${project.build.finalName}/resources" />
  52. <property name="js.compress.directory" value="${css.compress.directory}/js" />
  53. <apply executable="java" parallel="false" failonerror="true" dest="${js.compress.directory}">
  54. <fileset dir="${js.compress.directory}" includes="**/*.js" />
  55. <arg line="-jar" />
  56. <arg path="${closure-compiler}" />
  57. <arg line="--warning_level DEFAULT" />
  58. <arg line="--compilation_level SIMPLE_OPTIMIZATIONS" />
  59. <arg line="--js" />
  60. <srcfile />
  61. <arg line="--js_output_file" />
  62. <targetfile />
  63. <mapper type="regexp" from="^(.*)\.(js)$" to="\1-min.\2" />
  64. </apply>
  65. <move todir="${js.compress.directory}">
  66. <fileset dir="${js.compress.directory}" includes="**/*.js" />
  67. <mapper type="regexp" from="^(.*)-min\.(js)$" to="\1.\2" />
  68. </move>
  69. <echo message="成功压缩 JS 文件" />
  70. <echo message="开始压缩 CSS 文件. 请耐心等待!" />
  71. <apply executable="java" parallel="false" failonerror="true" dest="${css.compress.directory}">
  72. <fileset dir="${css.compress.directory}" includes="**/*.css" />
  73. <arg line="-jar" />
  74. <arg path="${yuicompressor}" />
  75. <arg line="--charset UTF-8" />
  76. <arg value="--type"/>
  77. <arg value="css"/>
  78. <srcfile />
  79. <arg line="-o" />
  80. <targetfile />
  81. <mapper type="regexp" from="^(.*)\.(css)$" to="\1-min.\2" />
  82. </apply>
  83. <move todir="${css.compress.directory}">
  84. <fileset dir="${css.compress.directory}" includes="**/*.css" />
  85. <mapper type="regexp" from="^(.*)-min\.(css)$" to="\1.\2" />
  86. </move>
  87. <echo message="成功压缩 CSS 文件" />
  88. </tasks>
  89. </configuration>
  90. </execution>
  91. </executions>
  92. </plugin>

JQUERY 的压缩工具 uglifyjs版本的配置,必须要有nodejs环境 (executable="node")即在cmd中能够执行 node --version. uglifyjs可以在https://github.com/mishoo/UglifyJS 下载,下载后续稍稍修改bin/uglifyjs,把里面的

  1. var uglify = require("uglify-js")

修改为

  1. var uglify = require("./uglify-js");//或者 ../uglify-js

因为uglify-js默认是在bin目录外面的。 



如需更新uglify的版本,每次覆盖相应文件,只修改上面文件即可。

  1. <echo message="开始压缩 JS 文件. 请耐心等待!" />
  2. <property name="uglifyjs" value="${project.build.directory}/compressor/uglify/uglifyjs" />
  3. <property name="yuicompressor" value="${project.build.directory}/compressor/yuicompressor.jar" />
  4. <property name="closure-compiler" value="${project.build.directory}/compressor/closure-compiler.jar" />
  5. <property name="css.compress.directory" value="${project.build.directory}/${project.build.finalName}/resources" />
  6. <property name="js.compress.directory" value="${css.compress.directory}/js" />
  7. <apply executable="node" parallel="false" failonerror="true" dest="${js.compress.directory}">
  8. <fileset dir="${js.compress.directory}" includes="**/*.js" />
  9. <arg line=" ${uglifyjs}" />
  10. <arg line=" --ascii" />
  11. <arg line=" -o" />
  12. <targetfile />
  13. <srcfile />
  14. <mapper type="regexp" from="^(.*)\.(js)$" to="\1-min.\2" />
  15. </apply>
  16. <move todir="${js.compress.directory}">
  17. <fileset dir="${js.compress.directory}" includes="**/*.js" />
  18. <mapper type="regexp" from="^(.*)-min\.(js)$" to="\1.\2" />
  19. </move>

maven中用yuicompressor和closure-compiler对js、css文件进行压缩的更多相关文章

  1. JS&CSS文件请求合并及压缩处理研究(五)

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  2. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  3. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  4. nginx设置反向代理后,页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  5. Web性能优化之动态合并JS/CSS文件并缓存客户端

    来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...

  6. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  7. javascript异步延时载入及推断是否已载入js/css文件

    <html> <head> <script type="text/javascript"> /**======================= ...

  8. MVC打包压缩JS&CSS文件调试时过滤了一些文件

    BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件:   后台跟踪了 ...

  9. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

  10. js动态加载js css文件,可以配置文件后辍,防止浏览器缓存

    js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...

随机推荐

  1. Linux 静态和动态添加路由

    (一)静态添加 1/5 首先让我们查看当前机器的路由表,执行如下命令:route -n [root@vnode33 network-scripts]# route -n Kernel IP routi ...

  2. HDU 1403 Longest Common Substring(后缀自动机——附讲解 or 后缀数组)

    Description Given two strings, you have to tell the length of the Longest Common Substring of them. ...

  3. 《javascript模式--by Stoyan Stefanov》书摘--基本技巧

    一.基本技巧 1,变量释放的副作用 a.使用var创建的全局变量(在函数外部创建)不能删除. b.不使用var创建的隐含全局变量(尽管在函数内部创建)可以删除. // 定义三个全局变量 var glo ...

  4. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别

    $().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...

  5. 软工实践Alpha冲刺(1/10)

    队名:我头发呢队 组长博客 作业博客 张杰(组长) 过去两天完成了哪些任务 查阅Python爬取音源的资料,如 Python3爬虫抓取网易云音乐热评实战 Python爬取高品质QQ音乐(2) 如何爬网 ...

  6. iOS-获取webView的高度

    - (void)webViewDidFinishLoad:(UIWebView *)wb{ //方法1 CGFloat documentWidth = [[wb stringByEvaluatingJ ...

  7. 3dContactPointAnnotationTool开发日志(五)

      今天要做的第一件事就是把obj文件里不同的对象分割开来.   通过仔细观察发现obj文件中以"o "开头的行会跟着一个对象的名字.g代表对象所属组名,我这里只要用到对象名就行了 ...

  8. React Components Template

    React Components Template "use strict"; /** * * @author xgqfrms * @license MIT * @copyrigh ...

  9. git & configs

    git & configs https://alvinalexander.com/git/git-show-change-username-email-address https://stac ...

  10. RT-thread 设备驱动组件之PIN设备

    在RT-thread 2.0.0正式版中引入了pin设备作为杂类设备,其设备驱动文件pin.c在rt-thread-2.0.1\components\drivers\misc中,主要用于操作芯片GPI ...