LESS部署和构建自动化

我一直想在Web开发中学习构建自动化，而在ANT构建Android应用程序方面只有真正的经验。LESS部署和构建自动化

我想构建利用LESS的网站，但我无法看到如何实现这一点，这听起来像是在开发中使用嵌入式JS方法并在部署时将LESS编译为CSS的良好实践，但我不理解一个很好的方法，可以在构建脚本中匹配LESS链接和JS包含jess.js。例如

更换：

... html ... 

<link rel="stylesheet/less" type="text/css" href="styles.less" /> 
<script src="less.js" type="text/javascript"></script> 

... html ...

有了：

<link rel="stylesheet/css" type="text/css" href="styles.min.css" />

我希望我所提到的是有道理的。

有用

如果任何人都可以给我任何指针/建议在这个问题上我将不胜感激。

来源

2013-03-14 Malachi

没有构建脚本将能够将一个CSS文件与js文件合并，如你的例子。他们是两种完全不同的语言，服务于两种完全不同的需求，他们需要彼此分开。由于Less最后只是CSS，将Less文件合并到js文件是没有意义的。

而且最佳实践建议把CSS链接在文档的头部（为史蒂夫Souders的建议here）和的javascript代码在文件的结尾，就结束标记（再次史蒂夫Souders的前， here）。如果你遵循这些规则（这是强烈建议性能）你最终将CSS链接远离你的JS在HTML脚本，像这样：

<html> 
    <head> 
    <link rel="stylesheet/less" type="text/css" href="styles.css" /> 
    </head> 
    <body> 

    ....here goes the content of the page 

    <script type="text/css" src="scripts.js"></script> 
    </body> 
</html>

现在，让我们想象一个很基本的工作流程。你有你的基本HTML结构，你需要调整它的布局。您添加一个css重置（reset.css）并开始在称为style.less的Less文件中创建文档样式。如果您添加

<link rel="stylesheet/less" type="text/css" href="styles.less" />

在文档的头部，您将无法看到任何更改，因为浏览器无法理解.less文件。这些文件需要在css中进行预处理和“翻译”，因此浏览器可以解析它们并将给定的样式应用到HTML页面。所以你会运行你的（.less）文件到一个预处理器中，然后这个处理器会吐出一个css文件。所以，你的<head>将是：

<head> 
    <link type="text/css" href="css/reset.css" /> 
    <link type="text/css" href="css/styles.css" /> 
</head>

注意，styles.less文件不会在HTML中引用，但只有它的CSS对应styles.css的。当你对布局感到满意时，就可以继续前进。

现在，这里是构建脚本真正发光的好地方。构建脚本将（除其他外）连接相同类型的外部文件。在这种情况下，它可以将这两个文件合并成一个文件。您的新<head>将是：

<head> 
    <link type="text/css" href="css/main.css" /> 
</head>

同样的事情也会在底部js文件发生。来源：

<script src="one.js" type="text/javascript"></script> 
<script src="two.js" type="text/javascript"></script> 
<script src="three.js" type="text/javascript"></script>

到：

<script src="scripts.js" type="text/javascript"></script>

正如我所说的，这是使用较少（或无礼/ SCSS，或手写笔），工作流和构建脚本的一个非常基本的，粗糙的例子。我想说Paul Irish给出了在this视频中运行的构建脚本的最简单和最清晰的代表，我强烈建议，尤其是因为它具有HTML5 Boilerplate，如您的问题中所引用的那样。

希望这有助于你更好地理解，让我知道你是否有任何疑问。

来源

2013-03-15 02:11:00 Nobita

感谢您花时间以这种详细的方式回答我的问题，并指出我一些有用的资源，即构建脚本视频。我认为你误解了我想要做的事情。这是了解其他人如何部署应用程序并使用LESS。我会更新我的问题以使其更清楚。 – Malachi 2013-03-15 18:47:18

我是Less.js的核心团队。如果您可以避免使用LESS，请不要使用浏览器版本（例如，您可能会让用户在浏览器中实时编辑“主题”......但除非您正在做这样的事情，否则请避免使用浏览器版本）。

尝试使用此构建工具进行编译Less to CSS：https://github.com/assemble/assemble-styles。推荐的做法是将LESS预编译为CSS，并且使用汇编样式可以轻松创建LESS/CSS文件的“捆绑”或多个版本，并且可以添加监视任务，以便在您处理LESS他们自动编译为CSS文件。

随着LESS被编译为CSS作为开发过程的一部分，您可以将精力集中在如何在生产中处理CSS（而不必考虑LESS）。合理？如果您有任何问题，我很乐意提供帮助。

如果您熟悉npm，那么这很容易使用。请做npm install assemble-styles

然后按照README上的说明进行操作。

来源

2013-03-17 18:08:11 jonschlinkert

感谢您的回复 - 我没有使用Node的经验，目前没有任何构建部署的经验。我会研究你推荐的那个链接，看看我能找到什么。干杯 – Malachi 2013-03-18 20:12:30

没问题，我希望它很有用 – jonschlinkert 2013-03-19 21:24:44

LESS部署和构建自动化

回答

相关问题