认识我的人也知道我对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 |
---|
|
Generated CSS |
|
翻译自: https://blog.frankel.ch/empower-your-css-in-your-maven-build/