logo标签列表

在生产环境中使用Less css框架

javacsslessbuild-processcss-frameworks
6
几周前，我才了解到LESS CSS。它正是我在编写CSS代码时所需要的东西。
现在我非常渴望使用它，并想将其应用于生产场景，但有一个问题。要使用LESS CSS，您有两个选项：
1. 在网页中包含less.js。
2. 预编译LESS文件，然后使用。
第一种选择我无法承受，因为我需要使用大小高达43 KB的less.js。这会在我已经使用Jquery的情况下增加额外的负载。
第二种选择看起来很有前途，但问题是，在生产中编码时，您不能每次都编译LESS以针对更改进行测试。它应该像直接编写CSS那样无缝体验。我应该编写LESS并立即反映在页面上。
那么，有人可以帮助我设置这种工作流程吗？
欢迎提出其他类似框架的建议。
1
我通常会采用一种折中的方式——在开发过程中使用JS文件，然后在构建生产环境之前进行预编译。你正在使用哪种开发堆栈？ - rjz
编译成CSS，就像答案所说的那样 :) - bzx
3个回答
4

我在开发中使用Less-PHP：每当我修改主要的.less文件后，刷新浏览器进行测试时，会输出.css文件。

然后在生产环境中，我只需像往常一样复制.css文件。

我不会在生产中使用Less.js，因为它只适用于启用JS的用户，而且无需此功能也会使所有用户变慢，从而导致下载和渲染时间延长。

编辑：还有一些软件会等待您的LESS文件被修改并保存，然后在发生这种情况时编译它。同样，可以针对每个项目设置Less PHP并执行相同的操作，如果可以避免，我更喜欢不必每天在系统上启动一个守护程序。我已经运行了防火墙、杀毒软件、MSN、Dropbox、jabber客户端、复制粘贴工具、集成SVN等等 :)
2015年的编辑：我已经使用Prepros 4一段时间了，或者会使用一些基于grunt的编译器。我的同事们在Prepros 5中遇到了一些错误，所以我还没有安装它（Prepros 5现在是专有软件，需要花费一些美元。我认为这是一个非常好的投资）

编辑2：看起来您在使用Java。通过搜索，我们可以找到这个解决方案：http://www.asual.com/blog/lesscss/2009/11/05/less-for-java.html

@AndrewMarshall 谢谢，我发帖后才看到那个。答案已经编辑过了。 - FelipeAls
2

正如您所述，生产环境中使用less.js是一个坏主意。如果您在使用Git，还可以作为pre-commit钩子的一部分生成生产CSS文件，以便您不必为生产环境手动执行任何操作。我已经写了一些关于我在这里使用的工作流程-http://tjvantoll.com/2012/07/07/the-ideal-less-workflow-with-git/。

为什么不在提交期间编译less文件呢？ - dusual
@dusual 在“pre-commit”挂钩中编译文件可以确保CSS文件包含在提交中。 - TJ VanToll
1
我也使用Java，但以下内容基本适用于任何技术：
开发模式： 1. 包含less文件，但不包含生成的css文件 2. 运行less js
生产模式： 1. 使用ant清理生成的css文件夹 2. 使用less rhino从less编译css文件 使用ant 3. 包含生成的css文件，但不包含less文件
我还做了一些额外的事情，比如主题/皮肤，可以使用任何构建工具（ant、maven等）轻松实现。我也让我的系统忽略生成文件夹的版本控制，因为它将被构建过程删除并重新生成。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接