转载自: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. 洛谷P1068 分数线划定:sort结构体排序+贪心

    题目描述 世博会志愿者的选拔工作正在 A 市如火如荼的进行.为了选拔最合适的人才,A市对所有报名的选手进行了笔试,笔试分数达到面试分数线的选手方可进入面试. 面试分数线根据计划录取人数的150%划定, ...

  2. vue 与jq 的对比

    vue.react和angular,众所周知,他们是前端框架的3个大佬.这篇主要想对比一下用vue和用jq的区别,至于和其他框架的对比,我想vue的官网说的更为详细. 我算是独自用vue写过一个小型项 ...

  3. Solium代码测试框架

    Solium, 在solid中,Linter用于标识和修复样式&安全问题 //调用测试 solium -d contracts --fix 源代码名称:Solium 源代码网址:http:// ...

  4. NMAP-高级用法

    1.报文分段 2.偏移 –mtu后面的数字是8的倍数 3.源端口欺骗 4.指定报文长度 5.ttl 6.mac地址伪造 0代表随机伪造 7.正常输出 8.输出为xml 9.输出为grep 10.输出所 ...

  5. Python3 数据类型-列表

    序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. 索引如下图: 列表命名(list): 组成:使用[]括起来,并且 ...

  6. javaIO--字节流

    流---是指的一组有序的.有气垫和重点的字节集合,是对的护具传输的总称或者抽象. 流采用缓冲区技术,当写一个数据时,系统将数据发送到缓冲区而不是外部设备(如硬盘),当读一个数据时,系统实际是从缓冲区读 ...

  7. Qt代码覆盖率code coverage(VS版)

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt代码覆盖率code coverage(VS版)     本文地址:http://techi ...

  8. 【alpha】Scrum站立会议第4次....10.19

    小组名称:nice! 小组成员:李权 于淼 杨柳 刘芳芳 项目内容:约跑app(约吧--暂定) 1.任务进度 2.燃尽图 功能列表 1.登录注册 2.创建跑步计划 3.筛选跑友 4.加一起跑步的人为好 ...

  9. Innodb 中 RR 隔离级别能否防止幻读?

    问题引出 我之前的一篇博客 数据库并发不一致分析 有提到过事务隔离级别以及相应加锁方式.能够解决的并发问题. 标准情况下,在 RR(Repeatable Read) 隔离级别下能解决不可重复读(当行修 ...

  10. img 和 background-image 优劣比较

    一. 简单来说,img是内容部分的东西,css的background-image是修饰性的东西. img------从页面元素来说,如果是页面中的图片是作为内容出现的,比如广告图片,比如产品图片,那么 ...