转载自: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. 理解glance

    摘要: 本节介绍 OpenStack Image 服务 Glance 的基本概念. OpenStack 由 Glance 提供 Image 服务. 理解 Image 要理解 Image Service ...

  2. php常用方法汇总

    xml格式转成array <?php $str='<xml><node><![CDATA[content]]></node></xml> ...

  3. 浅谈蓝牙低功耗(BLE)的几种常见的应用场景及架构(转载)

    转载来至beautifulzzzz,网址http://www.cnblogs.com/zjutlitao/,推荐学习 蓝牙在短距离无线通信领域占据举足轻重的地位—— 从手机.平板.PC到车载设备, 到 ...

  4. Python中对变量是否为None的判断

    三种主要的写法有: 第一种:if X is None; 第二种:if not X: 当X为None,  False, 空字符串"", 0, 空列表[], 空字典{}, 空元组()这 ...

  5. python学习笔记01:安装python

    下载python: 从从https://www.python.org/downloads/下载python,根据操作系统的不同,选择不同的版本下载.注意:linux系统大多预装了python,可以直接 ...

  6. 在LaTex中插入电路图的方法(插入图片)

    主要的需求是要在文档中插入电路图. 有两种方法,一种是直接在LaTex中绘制电路图,使用的库主要是circ和circuitikz 另一种是在其他软件上绘制电路图,转成特定图像格式后,在Latex中插入 ...

  7. Windows 7中安装Solr7

    最新忙里偷闲,研究一下了Lucene.Net,发现操作比较繁琐,同比相似的功能,感觉Solr比较简单,容易使用.不过由于Solr使用的是Java的环境,对于.Net开发的人员来说,还是比较陌生,搭配环 ...

  8. 【Linux】- CentOS 7 安装.NET Core 2.1

    添加dotnet产品Feed 在安装.NET Core之前,您需要注册Microsoft产品Feed. 这只需要做一次. 首先,注册Microsoft签名密钥,然后添加Microsoft产品Feed. ...

  9. Shell中sort-cut-wc详解

    sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 ...

  10. 限制玻尔兹曼机(Restricted Boltzmann Machine)RBM

    假设有一个二部图,每一层的节点之间没有连接,一层是可视层,即输入数据是(v),一层是隐藏层(h),如果假设所有的节点都是随机二值变量节点(只能取0或者1值)同时假设全概率分布满足Boltzmann 分 ...