java web应用程序的即时LESS编译器？答案

【问题标题】：On the fly LESS compiler for java web app?java web应用程序的即时LESS编译器？
【发布时间】：2012-12-01 20:49:11
【问题描述】：

我正在寻找一种在开发过程中根据需要在服务器端编译 CSS LESS 文件的方法。例如，如果浏览器向 /assets/css/foo.css 发出请求，我希望服务器注意到有一个 /assets/css/foo.less 文件，然后编译该文件并返回结果 css。我猜一定有一个LESS servlet可以做到这一点？

我正在运行带有 Spring MVC 应用程序的 tomcat 7

如何配置 Java Web App 以进行动态 LESS 编译？

【问题讨论】：

标签： java css jakarta-ee servlets less

【解决方案1】：

我认为您正在寻找的是Servlet Filter。我不不知道有一个现成的可以进行 LESS 编译并且会开始使用 lesscss-java 制作一个，但现在我可以看到有一个更大的项目，名为 Web Resource Optimizer for Java - wro4j 与服务器端LESS support.

【讨论】：

只是关于使用 wro4j 进行即时编译的提示：code.google.com/p/wro4j/wiki/AbstractProcessorsFilter
@AlexObjelean 如果您只想在开发过程中使用过滤器怎么办？
WroFilter 有一个启用/禁用标志。您只能在开发中设置它，并且一切都应该在没有其他更改的情况下工作。

【解决方案2】：

在构建 webapp 期间，首先将 less 文件编译为 css 文件会更简单（并且更有效）。
例如，在使用 Maven 时，我们使用 lesscss-maven-plugin（compile 目标，process-sources 阶段）从 less 生成 css 文件文件。然后只有 css 文件被使用并打包在 webapp 中。没有 less 个文件被动态使用。
另一个优点是在部署 webapp 之前编译的文件更少，因此可以更快地检测到编译错误。

pom.xml 中的配置示例：

<plugin>
    <groupId>org.lesscss</groupId>
    <artifactId>lesscss-maven-plugin</artifactId>
    <version>1.3.0</version>
    <configuration>
        <sourceDirectory>${project.basedir}/src/main/webapp/less</sourceDirectory>
        <outputDirectory>${project.build.directory}/${project.build.finalName}/css</outputDirectory>
        <compress>true</compress>
        <includes>
            <include>main.less</include>
        </includes>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin>

【讨论】：

我同意这在投入生产之前很好，因为设计师只是摆弄设置运行 maven 每次你改变一个小东西都会扼杀生产力

【解决方案3】：

我们所做的是我们有两种模式：开发和生产。

对于dev，使用官方的less css js编译器，它可以即时编译：

<link type="text/css" rel="stylesheet/less" href="${...}/style.less" />
<script>(window.less = window.less || {}).env = 'development';</script>
<script src="${staticContext}/lib/less-1.3.3.js"></script>

在您的 HTML 中

对于 prod，使用 https://github.com/marceloverdijk/lesscss-maven-plugin 编译的样式

<link type="text/css" rel="stylesheet" href="${staticContext}/css/style.css" />

【讨论】：