本文介绍通过使用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

使用yuicompressor-maven-plugin压缩js及css文件相关推荐

  1. Visual Studio 编译任务压缩js和css文件

    如今网站都在说优化,压缩js和css文件就成了最基本的一种方法,js和css压缩有很多方法,很多网站也提供了这样的功能,也可以用YUI提供的包手动压缩,但是这都不效率啊,能不能在vs生成部署包的时候把 ...

  2. php 压缩js css文件,PHP实现动态压缩js与css文件的方法

    本文实例讲述了PHP实现动态压缩js与css文件的方法.分享给大家供大家参考,具体如下: 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用 只需要 ...

  3. php 压缩html css,PHP实现动态压缩js与css文件的方法

    这篇文章主要介绍了关于PHP实现动态压缩js与css文件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 本文实例讲述了PHP实现动态压缩js与css文件的方法.分享给大家供大家参 ...

  4. maven js css 压缩,使用wro4j和maven在编译期间压缩js和css文件(经典)

    最近在对一个web系统做性能优化. 而对用到的静态资源文件的压缩整合则是前端性能优化中很重要的一环. 好处不仅在于能够减小请求的文件体积,而且能够减少浏览器的http请求数. 因为是基于java的we ...

  5. 使用wro4j和maven在编译期间压缩js和css文件

    最近在对一个web系统做性能优化. 而对用到的静态资源文件的压缩整合则是前端性能优化中很重要的一环. 好处不仅在于能够减小请求的文件体积,而且能够减少浏览器的http请求数. 因为是基于java的we ...

  6. JAVA压缩JS或CSS文件

    平时开发过程中使用的js或css文件基本都是未经压缩的方便调试,在真正上线后一般都会使用压缩后的文件,我们可以使用一些工具进行压缩,我们也可以通过JAVA代码自己实现文件的压缩,今天为大家介绍的是使用 ...

  7. yui压缩JS和CSS文件

    CSS和JS文件经常需要压缩,比如我们看到的XX.min.js是经过压缩的JS. 压缩文件第一个是可以减小文件大小,第二个是对于JS文件,默认会去掉所有的注释,而且会去掉所有的分号,也会将我们的一些参 ...

  8. grunt合并压缩js、css文件

    参考文章如下: http://www.cnblogs.com/yexiaochai/p/3594561.html http://www.cnblogs.com/yexiaochai/p/3602002 ...

  9. 使用grunt合并压缩js、css文件

    需要了解的知识:1.nodejs的安装与命令行使用2.nodejs安装应用3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件合并, ...

  10. IIS 7 启用 gzip 静态压缩 压缩js和css文件

    搞了很久,不如nginx好弄,不知道怎么修改压缩比,也不知道怎么压缩的规则是啥(管理器上没有写),不过反正出来了,一个js文件900多K变成了100多K 1.在web.config文件里面加上: &l ...

最新文章

  1. 【linux】Valgrind工具集详解(九):Memcheck检查的内容和方法
  2. 网络安全堪忧 员工上网受限
  3. KMP算法的动态规划解说
  4. Vue+Openlayers实现地图缩放图标等比例缩放
  5. 【C++提高班】c++数组遍历比较相邻的数值
  6. IDEA这样配置注释模板,让你高出一个逼格!!
  7. 如何在Angular 10中生成QR码
  8. 神器:多卡同步的Batch Normalization
  9. MFC初探 —— 基于对话框的MFC显示控制台
  10. nginx动态php转发,Nginx 动态 upstreams 实现,nginxupstreams_PHP教程
  11. 电大计算机考试试题及答案,电大统考计算机考试试题及答案.doc
  12. CentOS7 安装lua luarocks
  13. SplitContainer控件设置固定比例
  14. 无法定位程序输入点于动态链接库怎么办
  15. 摄影测量——单片空间后方交会
  16. Lightly IDE 使用评测
  17. 【HMS core】【Ads Kit】华为广告——海外应用在国内测试正式广告无法展示
  18. [unreal4入门系列之一] Unreal4引擎是什么
  19. 期货交易品种基本面分析(期货品种技术面分析)
  20. 机器自动翻译古文拼音 - 十大宋词 - 声声慢 寻寻觅觅 李清照

热门文章

  1. KELL中程序封装的实现
  2. Oracle P6培训系列:17建立基线
  3. java 替换pdf 文本_java 查找替换pdf中的指定文本
  4. 【PyCharm 使用指南】之汉化插件(官方提供)
  5. 【软考系统架构设计师】2020年下系统架构师综合知识历年真题
  6. 网易有道词典 怎么在 pdf 上取词翻译
  7. 威纶通触摸屏离线模拟正常,为什么下载到屏幕后部分按钮开关等不显示?
  8. STM32官方固件库(标准固件库)下载及介绍
  9. VsCode字体颜色修改和背景图片修改 字体高亮
  10. flask 导出excel