maven中默认过滤css_在您的Maven构建中增强CSS

最新推荐文章于 2021-06-20 11:31:34 发布
最新推荐文章于 2021-06-20 11:31:34 发布
阅读量130 收藏
点赞数

maven中默认过滤css

认识我的人也知道我对GUI感兴趣：这意味着有时我会变得不习惯并深入研究样式表（即使我一点也不具备图形技能）。 当发生这种情况时，我总是对如何最好地分解样式提出疑问。 在这方面，缺少不同的CSS版本，因为它们不是由工程师管理的。 最近的趋势是从源代码生成CSS，它带来了一些有趣的属性，例如嵌套，变量，混合，继承和其他。 这种趋势的两个例子是LESS和SASS 。

在下面可以找到一个不太快的示例。

假设我是一名工程师，那么我对那些技术的唯一要求就是我可以在构建过程中以自动化和可复制的方式生成最终CSS。 经过快速搜索，我说服了使用wro4j 。 在简单的用例中，这就是原因。

Maven插件

Wro4j包含一个Maven插件 。 为了在构建中调用它，只需将其添加到您的POM中： 

<plugin>
    <groupId> ro.isdc.wro4j </groupId>
    <artifactId> wro4j-maven-plugin </artifactId>
    <version> 1.4.6 </version>
    <executions>
        <execution>
            <goals>
                <goal> run </goal>
            </goals>
            <phase> generate-resources </phase>
        </execution>
    </executions>
</plugin>

您对Maven过敏？ 没问题，还免费提供了命令行工具 。

建立时间

出于明显的性能原因，我倾向于生成时间而不是运行时。 但是，如果您更喜欢后者，则可以为此准备一个JavaEE过滤器 。

可配置性

由于wro4j的原始策略是运行时生成，因此默认配置文件应位于存档中。 但是，可以通过在POM中设置一些标签来轻松地进行调整： 

<configuration>
    <wroManagerFactory> ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory </wroManagerFactory>
    <wroFile> ${basedir}/src/main/config/wro.xml </wroFile>
    <extraConfigFile> ${basedir}/src/main/config/wro.properties </extraConfigFile>
</configuration>

最后一击

赞扬wro4j的真正原因是LESS生成只是其功能的一小部分：对于wro4j而言，它只是其中的一个处理器 。 您只需要查看一长串处理器 （前置和后置）即可使用它们。 例如，wro4j还包装了一个JAWR处理器（ 我一段时间前写过的捆绑和缩小产品）。

但是，一旦到达那里，就会有一个全新的世界出现在眼前，因为您得到了以下处理器：

  • 通过使用Google，YUI，JAWR等将其最小化来减小JavaScript文件的大小。
  • 通过缩小CSS文件来减小它们的大小
  • 通过将JavaSscript文件合并到一个文件中来最大程度地减少请求数
  • 通过将CSS文件合并为一个文件，最大程度地减少请求数
  • 处理LESS CSS
  • 处理SASS CSS
  • 使用LINT分析您JavaScript

列表实际上是无止境的，您应该真正看看。 此外，如果需要，您可以通过编写自己的处理器来弥合您的最爱。

快速入门

为了快速设置wro4j，以下是一些准备使用的代码片段：

  • 如上所示，Maven POM 
    <plugin>
    <groupId> ro.isdc.wro4j </groupId>
    <artifactId> wro4j-maven-plugin </artifactId>
    <version> 1.4.6 </version>
    <configuration>
        <wroManagerFactory> ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory </wroManagerFactory>
        <wroFile> ${basedir}/src/main/config/wro.xml </wroFile>
        <extraConfigFile> ${basedir}/src/main/config/wro.properties </extraConfigFile>
        <targetGroups> all </targetGroups>
        <cssDestinationFolder> ${project.build.directory}/${project.build.finalName}/style/ </cssDestinationFolder>
        <jsDestinationFolder> ${project.build.directory}/${project.build.finalName}/script/ </jsDestinationFolder>
        <contextFolder> ${basedir}/src/main/webapp/ </contextFolder>
        <ignoreMissingResources> false </ignoreMissingResources>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal> run </goal>
            </goals>
            <phase> generate-resources </phase>
        </execution>
    </executions>
</plugin>

    注意ConfigurableWroManagerFactory的使用。 通过更新以下文件，轻松添加和删除处理器。

  • wro.properties处理器文件，该文件列出了应在源文件上执行的处理。 在这里，我们从LESS生成CSS，将导入解析为一个文件，并最小化CSS（使用JAWR）和JavaScript： 
    preProcessors=lessCss,cssImport
postProcessors=cssMinJawr,jsMin
  • wro.xml配置文件，告诉wro4j如何合并CSS和JS文件。 在我们的例子中， styles.css将被合并到all.css和global.js到all.js 。 
    <?xml version="1.0" encoding="UTF-8"?>
<groupsxmlns="http://www.isdc.ro/wro">
  <groupname="all">
    <css> /style/styles.css </css>
    <js> /script/global.js </js>
  </group>
</groups>
  • 最后，在下面可以找到一个LESS示例。

结论

有一些针对Web应用程序进行优化的途径。 有些提供了定义CSS的替代方法，有些缩小了CSS，有些JS，另一些将这些文件合并在一起，等等。忽略它们是很可惜的，因为它们可能是繁重的场景中的真正资产。 wro4j提供了一种简单的方法来将所有这些操作包装到可复制的版本中。

LESS

@default-font-family: Helvetica, Arial, sans-serif;
@default-radius: 8px;
@default-color: =5B83AD;
@dark-color: @default-color - =222;
@light-color: @default-color + =222;

.bottom-left-rounded-corners (@radius: @default-radius) {
    .rounded-corners(0, 0, @radius, 0)
}

.bottom-right-rounded-corners (@radius: @default-radius) {
    .rounded-corners(0, 0, 0, @radius)
}

.bottom-rounded-corners (@radius: @default-radius) {
    .rounded-corners(0, 0, @radius, @radius)
}

.top-left-rounded-corners (@radius: @default-radius) {
    .rounded-corners(@radius, 0, 0, 0)
}

.top-right-rounded-corners (@radius: @default-radius) {
    .rounded-corners(0, @radius, 0, 0)
}

.top-rounded-corners (@radius: @default-radius) {
    .rounded-corners(@radius, @radius, 0, 0)
}

.rounded-corners(@top-left: @default-radius, @top-right: @default-radius, @bottom-left: @default-radius,
                                                                          @bottom-right: @default-radius) {
    -moz-border-radius: @top-left @top-right @bottom-right @bottom-left;
    -webkit-border-radius: @top-left @top-right @bottom-right @bottom-left;
    border-radius: @top-left @top-right @bottom-right @bottom-left;
}

.default-border {
    border: 1px solid @dark-color;
}

.no-bottom-border {
    border-bottom: 0;
}

.no-left-border {
    border-left: 0;
}

.no-right-border {
    border-right: 0;
}

body {
    font-family: @default-font-family;
    color: @default-color;
}

h1 {
    color: @dark-color;
}

a {
    color: @dark-color;
    text-decoration: none;
    font-weight: bold;
    &:hover {
        color: black;
    }
}

th {
    color: white;
    background-color: @light-color;
}

td, th {
    .default-border;
    .no-left-border;
    .no-bottom-border;
    padding: 5px;
    &:last-child {
        .no-right-border;
    }
}

tr:first-child {
    th:first-child {
        .top-left-rounded-corners;
    }
    th:last-child {
        .top-right-rounded-corners;
    }
    th:only-child {
        .top-rounded-corners;
    }
}

tr:last-child {
    td:first-child {
        .bottom-left-rounded-corners;
    }
    td:last-child {
        .bottom-right-rounded-corners;
    }
    td:only-child {
        .bottom-rounded-corners;
    }
}

thead tr:first-child th, thead tr:first-child th {
    border-top: 0;
}

table {
    .rounded-corners;
    .default-border;
    border-spacing: 0;
    margin: 5px;
}

Generated CSS

.default-border{
    border:1pxsolid=39618b;
}

.no-bottom-border{
    border-bottom:0;
}

.no-left-border{
    border-left:0;
}

.no-right-border{
    border-right:0;
}

body{
    font-family:Helvetica,Arial,sans-serif;
    color:=5b83ad;
}

h1{
    color:=39618b;
}

a{
    color:=39618b;
    text-decoration:none;
    font-weight:bold;
}

a:hover{
    color:black;
}

th{
    color:white;
    background-color:=7da5cf;
}

td,th{
    border:1pxsolid=39618b;
    border-left:0;
    border-bottom:0;
    padding:5px;
}

td:last-child,th:last-child{
    border-right:0;
}

tr:first-childth:first-child{
    -moz-border-radius:8px000;
    -webkit-border-radius:8px000;
    border-radius:8px000;
}

tr:first-childth:last-child{
    -moz-border-radius:08px00;
    -webkit-border-radius:08px00;
    border-radius:08px00;
}

tr:first-childth:only-child{
    -moz-border-radius:8px8px00;
    -webkit-border-radius:8px8px00;
    border-radius:8px8px00;
}

tr:last-childtd:first-child{
    -moz-border-radius:0008px;
    -webkit-border-radius:0008px;
    border-radius:0008px;
}

tr:last-childtd:last-child{
    -moz-border-radius:008px0;
    -webkit-border-radius:008px0;
    border-radius:008px0;
}

tr:last-childtd:only-child{
    -moz-border-radius:008px8px;
    -webkit-border-radius:008px8px;
    border-radius:008px8px;
}

theadtr:first-childth,theadtr:first-childth{
    border-top:0;
}

table{
    -moz-border-radius:8px8px8px8px;
    -webkit-border-radius:8px8px8px8px;
    border-radius:8px8px8px8px;
    border:1pxsolid=39618b;
    border-spacing:0;
    margin:5px;
}

翻译自: https://blog.frankel.ch/empower-your-css-in-your-maven-build/

maven中默认过滤css

dlz00001
关注
解决Maven静态资源过滤
weixin_45784711的博客
05-07 162
有时路径配置正确，out文件中却被拦截 <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.css</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-
maven工程如何引用css和js文件
weixin_34296641的博客
04-29 503
工程目录结构如下图:   目的: 在index.jsp中引用hello.js和base.css文件 实现: 在web.xml中，新增&lt;servlet-mapping&gt;     &lt;servlet-name &gt;default &lt;/servlet-name &gt;         &lt;url-pattern &gt;*.js&lt;/url-pattern&gt...
JavaWeb开发分享：WRO
cloud的技术积累
12-14 2765
WRO压缩(processor)和组合(group) Javascript和CSS文件，减少文件传输次数和大小，有效提高java web应用性能
关于maven项目引入css或者js文件 路径的问题
夏晨Season的博客
12-19 7190
maven加载css和js文件失败，这时间很棘手的问题，首先更新下自己的maven项目，发现没什么用，其次是在引入jsp文件加入${pageContext.servletContext.contextPath}在运行项目，发现也没什么用，查阅资料后，找到了以下可行的方法： 方案一：可以在web.xml中配置一下就可以啦 &lt;servlet-name&gt;default &lt;/ser...
maven_springmvc_mybatis_demo-master.zip_DEMO_cutdm5_maven SSM_ma
09-21
"maven_ssm"和"maven和mybatis"标签强调了Maven在SSM集成中的作用，以及MyBatis作为数据访问层的重要地位。 在"maven_springmvc_mybatis_demo-master"这个压缩包中，我们可以期待找到以下关键组成部分： 1. **pom....
SSM-Maven.zip_ssm_ssm java_ssm maven
09-21
在"SSM_Maven"这个项目中，Maven作为项目构建工具起到了关键作用。Maven是一个项目管理和综合工具，它管理项目的构建、报告和文档生成。通过Maven的POM（Project Object Model）文件，开发者可以声明项目依赖、构建...
mg-maven-resource-optimizer：简单的Maven插件，用于在构建时gzip JS和CSS文件
02-04
简单的Maven插件，可在构建时将gzip JS和CSS文件压缩。 除了Maven本身，没有其他依赖项。 Maven依赖 Maven软件包发布在Github上： : 用法： <groupId>com.manikanta</groupId> <artifactId>mg-maven-resource-...
ssm-crud.zip_JSON_bootstrap_maven_ssm框架项目_ssm项目
09-20
SSM框架是Java Web开发中常用的三大框架Spring、Spring MVC和MyBatis的组合，而本项目"ssm-crud.zip"是一个基于SSM的增删查改（CRUD）应用，采用Maven进行构建，并结合了Bootstrap前端框架以及JSON数据传输技术。...
springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码.zip
07-09
springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码 不需要搭建数据库即可启动，如果需要后台管理+数据库可以自己迭代拓展增加； 项目可以轻易修改，非常简单，非常适合新手
前端资源压缩合并maven插件之wro4j
shut1k的博客
11-15 1214
前端资源压缩合并maven插件之wro4j原文写于 2014-05-14 https://github.com/kuitos/kuitos.github.io/issues/5参考文章：前端性能优化-JS/CSS压缩合并how to pom配置，加入wro4j插件<!--自定义属性--> <properties> <webSourceDirectory>src/main/webapp</we
maven项目引入js或css
zouxucong的博客
07-11 3184
在用maven架构引入EasyUI时，一直没有出现效果，经分析：在加载spring容器时，js和css文件被拦截，因为web.xml中DispatcherServlet拦截“/”，拦截了所有请求，包括对*.js,*.css的访问。 在spring中，
Maven工程中jsp如何引用js、css
众里寻她千百度，蓦然回首，那人却在灯火阑珊处
04-08 3473
1.Maven工程中的jsp与js的所在位置（一般情况下jsp与js文件都放在webapp文件下） 2.jsp文件中引用js 3.打开页面会报404 4. 报错原因分析: 从工程结构和引入路径来看,没有问题.这点可通过:在jsp代码页面，ctrl+鼠标左键,点击文件路径观察是否可以链接到那个js文件 验证.通过验证没有问题.但是一直报404,说明访问被拦截住
maven html css 路径,maven 教程
weixin_35160622的博客
06-20 311
谁讲的maven教程视频比较好？CSS布局HTML小编今天和大家分享分享，最好百度云。CSS布局HTML小编今天和大家分享孙宇Spring Mvc+Spring+Mybatis+Maven整合视频教创建数据库 选择开始菜单中→程序→【Management SQL Server 2008】→【SQL Server Management Studio】命令，打开【SQL Server Manageme...
Java工具集介绍2008年第五期
chszs的专栏
02-22 2146
Java工具集介绍2008年第五期原创文章，转载请保留作者名。1、Jawr新版本：1.2Jawr是一个Web应用程序的JavaScript/CSS的资源绑定和压缩工具。Jawr可以帮助开发带有大量使用JavaScript的Java Web应用程序，它通过压缩和加入捆绑中的所有的文件。捆绑的文件被创建成不被压缩原文件，当服务器启动时开始压缩，这样不会造成javascript文件过大web请求严重
SpringMVC设置不拦截静态资源css，js
weixin_33924770的博客
10-22 221
转自：https://blog.csdn.net/sh513023410/article/details/81361867 转载于:https://www.cnblogs.com/sharpest/p/5987379.html
wro4j的js和css压缩技术
wlp_name的专栏
08-06 1544
 最近在对一个web系统做性能优化. 而对用到的静态资源文件的压缩整合则是前端性能优化中很重要的一环. 好处不仅在于能够减小请求的文件体积,而且能够减少浏览器的http请求数. 因为是基于java的web系统,并且使用的是nginx+tomcat做为服务器. 最后考虑用wro4j和maven plugin在编译期间压缩静态资源. 优化前: 基本上所有的jsp都
在您的Maven构建中增强CSS
dlz00001的博客
06-08 123
认识我的人也知道我对GUI感兴趣：这意味着有时我会变得不习惯并深入研究样式表（即使我根本没有图形技能）。 当发生这种情况时，我总是会问如何最好地分解样式。 在这方面，缺少不同的CSS版本，因为它们不是由工程师管理的。 最近的趋势是从源代码生成CSS，它带来了一些有趣的属性，例如嵌套，变量，混合，继承和其他。 这种趋势的两个示例是LESS和SASS 。 在下面可以找到一个不太快的示例。 ...
wro4j和maven plugin在编译期间压缩静态资源.
码农的苦逼日常
07-12 2201
优化前: 基本上所有的jsp都引用了这一大坨静态文件: <link rel="stylesheet" type="text/css" href="${ctxPath}/css/skin.css"/> <link rel="stylesheet" type="text/css" href="${ctxPath}/css/jquery-ui-1.8.23.custom.css"/> <link re
使用Maven在IntelliJ IDEA中构建首个Java后台教程
总结，通过上述步骤，你将在IntelliJ IDEA中成功使用Maven构建出第一个基于SpringMVC和MyBatis的Java后台项目。这个过程中，不仅学会了Maven的使用，还加深了对Java企业级开发框架的理解。随着经验的积累，你可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值