Trên trình duyệt LESS trình biên dịch cho ứng dụng web java?

Question

Tôi đang tìm cách biên dịch các tệp CSS LESS ở phía máy chủ theo yêu cầu trong quá trình phát triển. Ví dụ, nếu trình duyệt gửi yêu cầu tới /assets/css/foo.css, tôi muốn máy chủ nhận thấy rằng có một tệp /assets/css/foo.less và sau đó để tệp này tuân thủ và kết quả trả về css. Tôi đoán có phải là một servlet LESS ở đâu đó có thể làm điều này?

Tôi đang chạy tomcat 7 với ứng dụng Spring MVC

Làm thế nào để cấu hình một ứng dụng Java Web để làm trên bay biên soạn LESS?

Answer 1

Tôi nghĩ rằng những gì bạn đang tìm kiếm là Servlet Filter. Tôi là không nhận ra một giá mà có LESS biên dịch và sẽ bắt đầu thực hiện một bằng cách sử dụng lesscss-java, nhưng bây giờ tôi có thể thấy có một dự án lớn hơn gọi là Web Resource Optimizer for Java - wro4j với phía máy chủ LESS support.

Answer 2

Sẽ là đơn giản hơn (và hiệu quả hơn) để biên dịch ít tệp của bạn thành tệp css, trong quá trình xây dựng ứng dụng web của bạn.
Như một ví dụ, khi sử dụng Maven, chúng tôi sử dụng lesscss-maven-plugin (biên dịch mục tiêu, quá trình nguồn pha) để tạo ra các file css từ các tập tin ít hơn. Sau đó, chỉ có các tệp css được sử dụng và đóng gói trong ứng dụng web. Không ít hơn tệp được sử dụng động.
Một ưu điểm khác là ít tệp được biên dịch trước khi webapp được triển khai, do đó lỗi biên dịch được phát hiện sớm hơn.

Cấu hình ví dụ trong 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

gì chúng tôi làm là chúng ta có hai chế độ: dev và sản xuất.

Đối dev, sử dụng trình biên dịch ít css chính thức js, mà biên dịch một cách nhanh chóng:

<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> 

trong HTML của bạn

cho sản, sử dụng phong cách biên soạn bởi https://github.com/marceloverdijk/lesscss-maven-plugin

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