Question

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

我正在使用Spring MVC应用程序运行tomcat 7

如何配置Java Web App以便即时编译？

Answer 1

我认为你要找的是Servlet Filter。我不知道现成的LESS编译并且已经开始使用lesscss-java创建一个，但现在我可以看到有一个名为{{3}的更大的项目与服务器端Web Resource Optimizer for Java - wro4j。

Answer 2

在构建您的webapp期间，首先将较少的文件编译为css文件，这将是更简单（并且更有效）。例如，当使用 Maven 时，我们使用lesscss-maven-plugin（编译目标， process-sources 阶段）来生成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>

Answer 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" />

在Java Web应用程序的飞行LESS编译器？

3 个答案: