Maven插件wro4j-maven-plugin压缩、合并js、css详解
1. 在pom.xml文件中,引入wro4j-maven-plugin插件
- <plugin>
- <groupId>ro.isdc.wro4j</groupId>
- <artifactId>wro4j-maven-plugin</artifactId>
- <version>${wro4j.version}</version>
- <executions>
- <execution>
- <id>optimize-web-resources</id>
- <phase>compile</phase>
- <goals>
- <goal>run</goal>
- </goals>
- </execution>
- </executions>
- <configuration>
- <ignoreMissingResources>false</ignoreMissingResources>
- <jsDestinationFolder>
- ${project.build.directory}/${project.build.finalName}/static/js
- </jsDestinationFolder>
- <cssDestinationFolder>
- ${project.build.directory}/${project.build.finalName}/static/css
- </cssDestinationFolder>
- <wroManagerFactory>
- ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory
- </wroManagerFactory>
- </configuration>
- </plugin>
2. 配置合并、压缩策略,新建文件/WEB-INF/wro.xml,例如配置内容为:
- <?xml version="1.0" encoding="UTF-8"?>
- <groups xmlns="http://www.isdc.ro/wro" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">
- <group name="basic">
- <css>/static/css/front.css</css>
- <js>/static/js/jquery.js</js>
- <js>/static/js/jquery.paging.min.js</js>
- <js>/static/js/front/global.js</js>
- <js>/static/js/front/search.js</js>
- </group>
- <group name="custom">
- <css>/static/css/front.css</css>
- <css>/static/css/comment/comment.css</css>
- <css>/static/plugins/syntaxhighlighter/shCore.css</css>
- <js>/static/js/front/coding.js</js>
- </group>
- </groups>
3. 配置wro4j相关属性,新建WEB-INF/wro.properties,例如配置内容为:
配置属性含义参见:http://everycoding.com/coding/68.html
- cacheUpdatePeriod=0
- modelUpdatePeriod=0
- debug=true
- disableCache=false
- gzipResources=true
- ignoreMissingResources=false
此插件必须配置wro.properties。否则在执行打包命令:clean package时否则会报如下异常:
src\main\webapp\WEB-INF\wro.properties (系统找不到指定的文件。) -> [Help 1]
4. 执行maven命令:clean package 打包
我们会发现根据wro.xml配置的策略在
${project.build.directory}/${project.build.finalName}/static/js
${project.build.directory}/${project.build.finalName}/static/css的目录下生成了
basic.css、basic.js、custom.css、custom.js等合并压缩后的文件。
Maven插件wro4j-maven-plugin压缩、合并js、css详解的更多相关文章
- Grunt的配置及使用(压缩合并js/css)
Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- 第十一节:Bundles压缩合并js和css及原理分析
一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...
- 引用:使用grunt 压缩 合并js、css文件
引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt 目录.png 2.在grunt目录下创建一个 src目录,存 ...
- 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度
使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...
- Google Pagespeed,自动压缩优化JS/CSS/Image
Google Pagespeed,自动压缩优化JS/CSS/Image 浏览: 发布日期:// 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Im ...
- 自写脚本实现上线前本地批量压缩混淆 js , css 代码。
最近做项目遇到一个要求,就是把本地的 js 和 css 进行压缩后再上线,由于之前项目并没有使用 webpack 之类的库,项目上也因为一些机密不能在线上压缩,这无疑给代码打包压缩带来了很大麻烦,于是 ...
- js对象详解(JavaScript对象深度剖析,深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- javascript 中合并排序算法 详解
javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的... 合并排序代码如下: <script type="text/javascript& ...
- java 流操作对文件的分割和合并的实例详解_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 java 流操作对文件的分割和合并的实例详解 学习文件的输入输出流,自己做一个小的示例,对文件进行分割和合并. 下面是代 ...
随机推荐
- oc的插件
umbra https://umbra3d.com/ 很不错
- C# 窗体位置 Show和ShowDialog (转载)
CenterParent 窗体在其父窗体中居中. CenterScreen 窗体在当前显示窗口中居中,其尺寸在 ...
- win10企业版激活密钥
NX9MP-TY3DJ-VYMW8-WWVRF-9W3F4
- [Algorithms] Refactor a Linear Search into a Binary Search with JavaScript
Binary search is an algorithm that accepts a sorted list and returns a search element from the list. ...
- 雷锋沙龙 ppt 演讲内容分享(xss,流量劫持的利用)
http://www.pkav.net/XSS.png?from=timeline&isappinstalled=0
- Android学习(二十一)OptionsMenu选项菜单
一.OptionsMenu选项菜单 在应用程序中点击功能按钮会弹出选项菜单,点击可以实现具体功能. 二.实现思路: 1.创建选项菜单: onCreateOptionsMenu(); 2.设置菜单项可用 ...
- react-native 极光推送(jpush-react-native)
极光推送官方支持的 React Native 插件 安装 npm install jpush-react-native --savenpm install jcore-react-native --s ...
- React Native 爬坑之路
1.react 基础 (创建组件及在浏览器上渲染组件) <!DOCTYPE html> <html lang="en"> <head> < ...
- 使用php在服务器端生成图文验证码
图文验证码的实现原理: 1):准备些许图片将其存储在数据库,每一张图片对应一个标识字段. 2):在服务器端使用数组的形式将图片与标识字段组合起来. 3):随机给客户端返回图片,并接受用户输入的字段. ...
- HTTP图解--了解Web及网络基础
1.网络基础TCP/IP 通常使用的网络是在TCP/IP协议族的基础上运行的,http属于它内部的一个子集. TCP/IP协议族按层次分别分为:应用层.传输层.网络层和数据链路层.分层的好处在于各司其 ...