Question

我一直希望在Web开发中学习构建自动化，只有在构建Android应用程序时才有真正的ANT经验。

我想构建利用LESS的网站，但我看不出如何实现这一点因为在开发中使用嵌入式JS方法并在部署时将LESS编译成CSS，这听起来是个好习惯，但我不明白一个很好的方法，可以匹配LESS链接和JS包含在构建脚本中的jess.js。 e.g。

更换：

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

我希望我提到的内容有道理。

有用

如果有人能就此事给我任何指示/建议我会非常感激。

Answer 1

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

然后按照自述文件中的说明进行操作。

Answer 2

没有构建脚本能够像您的示例中那样将css文件与js文件合并。它们是两种完全不同的语言，满足两种完全不同的需求，它们需要彼此分开。正如Less一样，最后只有CSS将Less文件合并到js文件中是没有意义的。

此外，最佳做法建议在文档的头部放置 css 链接（如Steve Souders建议here）和 javascript 代码。文件，就在关闭身体标签之前（Steve Souders，here）。如果您遵循这些规则（强烈建议性能），您最终会将hss脚本中的css链接放置在远离js脚本的位置，如下所示：

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

正如我所说，这是使用Less（或Sass / Scss，或Stylus）和构建脚本的工作流程的一个非常基本的粗略示例。我会说Paul Irish在this视频中给出了最简单，最清晰的构建脚本表示，我强烈推荐，特别是因为它具有HTML5 Boilerplate，如您的问题中所述。

希望这有助于您更好地理解，如果您有任何疑问请与我联系。

较少的部署和构建自动化

2 个答案: