Wro4j:从LESS文件生成CSS文件

时间:2014-02-03 08:42:36

标签: css less wro4j

编辑原始问题以提供所有详细信息。

在web.xml中添加了以下内容:

<filter>
    <filter-name>WroContextFilter</filter-name>
    <filter-class>ro.isdc.wro.http.WroContextFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>WroContextFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

<filter>
    <filter-name>WebResourceOptimizer</filter-name>
    <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    <init-param>
        <param-name>targetBeanName</param-name>
        <param-value>wroFilter</param-value>
    </init-param>
    <init-param>
        <param-name>targetFilterLifecycle</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>WebResourceOptimizer</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

在WEB-INF文件夹中创建了两个新文件wro.xml和wro.properties:

wro.properties:

managerFactoryClassName=ro.isdc.wro.manager.factory.ConfigurableWroManagerFactory
preProcessors=less4j,cssUrlRewriting,lessCssImport
postProcessors=less4j
disableCache=true

wro.xml:

<groups xmlns="http://www.isdc.ro/wro">
    <group name="base">
        <css>/resources/skins/abc/testing.less</css>
    </group>
</groups>

这里'resources'是一个文件夹:src / main / webapp。

在/ resources / skins / abc / folder:

中添加了一个文件testing.less
.btn-expand (@height: 30px) {
        box-sizing: border-box;
        height: @height;
        display: inline-block;
        color: #fff;
        font-size: 12px;
        text-decoration: none;
        padding-left: 20px;
        padding-right: 1px;
        margin-right: 20px;
        background: transparent url('images/sprites.png') no-repeat -5px -164px;
        border: 0;
        position: relative;
        outline: none;
        cursor:pointer;
        overflow: visible;
    }

pom.xml文件包含以下条目:

<repository>
    <id>releases</id>
    <name>Releases</name>
    <url>https://oss.sonatype.org/content/repositories/releases</url>
</repository>   (Inside <repositories> tag)

<dependency>
    <groupId>ro.isdc.wro4j</groupId>
    <artifactId>wro4j-core</artifactId>
    <version>1.6.2</version>
</dependency>  (Inside <dependencies> tag)

<plugin>
    <groupId>ro.isdc.wro4j</groupId>
    <artifactId>wro4j-maven-plugin</artifactId>
    <version>1.7.3</version>
    <configuration>
    <targetGroups>base</targetGroups>
        <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
        <cssDestinationFolder>${project.build.directory}/${project.build.finalName}/resources/css/test/</cssDestinationFolder>
        <wroFile>${basedir}/src/main/webapp/WEB-INF/wro.xml</wroFile>
        <extraConfigFile>${basedir}/src/main/webapp/WEB-INF/wro.properties</extraConfigFile>
        <contextFolder>${basedir}/src/main/webapp/</contextFolder>
        <ignoreMissingResources>false</ignoreMissingResources>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>run</goal>
            </goals>
            <phase>prepare-package</phase>
        </execution>
    </executions>
</plugin>  [Inside <build> <plugins> tag.] 

我没有在我的eclipse IDE中安装m2e-wro4j插件。

基于以上所述,我假设当我从命令提示符[mvn clean install]进行maven构建时,应在/ resources / css / test /文件夹中创建一个名为base.css的css文件。我可以在展开的项目WAR文件中看到新文件夹'test',但它不包含base.css文件。控制台输出看起来像这样:

[INFO] Wro4j Model path: C:\workspace\{projectname}\src\main\webapp\WEB-INF\wro.xml
[INFO] targetGroups: base
[INFO] minimize: true
[INFO] ignoreMissingResources: false
[INFO] parallelProcessing: false
[INFO] destinationFolder: C:\workspace\{projectname}\target
[INFO] jsDestinationFolder: null
[INFO] cssDestinationFolder: C:\workspace\{projectname}\target\{WAR file name}\resources\css\test
[INFO] groupNameMappingFile: null
[INFO] wroManagerFactory class: ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory
[INFO] The following groups will be processed: [base]
[INFO] folder: C:\workspace\{projectname}\target\{WAR file name}\resources\css\test
[INFO] processing group: base.css
[INFO] folder: C:\workspace\{projectname}\target
[INFO] processing group: base.js 

再观察一次。为了确保wro.properties文件被正确放置并被插件选中,我在此文件[postProcessors=less4jtttt]中尝试了一些错误的值,并且在进行构建时可能会看到异常。但是,wro.xml文件中的无效文件路径未引发任何异常。

1 个答案:

答案 0 :(得分:1)

虽然答案也已发布在邮件列表中,但我也会在此处发布以获取可见性:

我设法在本地重现你的测试用例,我看到的是一个空文件。第一印象是存在问题,但实际上这是预期的行为。 正在处理的内容越少,定义了一个mixin,只要它没有被使用就不会产生任何输出。

要获得有效的输出,请更新您的less以使用该mixin:

div.expandable {
    .btn-expand()
}