2

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

我想构建使用 LESS 的网站，但我不知道如何实现这一点，因为这听起来像是在开发中使用嵌入式 JS 方法并在部署时将 LESS 编译成 CSS 的好习惯，但我不明白一个好的方法这将匹配构建脚本中 jess.js 的 LESS 链接和 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" />

我希望我所提到的有意义。

有用

如果有人可以就此事给我任何指示/建议，我将不胜感激。

4

2 回答 2

2

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

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

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

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

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

于 2013-03-17T18:08:11.090 回答
1

No build script will be able to merge a css file with a js file as in your example. They are two completely different languages serving two completely different needs, and they need to be kept apart from each other. As Less is, in the end, just CSS it makes no sense to merge a Less file into a js file.

Moreover best practices suggest to put css links in the head of your document (as Steve Souders suggests here) and javascript code at the end of the document, just before the closing body tag (again Steve Souders, here). If you follow these rules (which is strongly recommended for performance) you'll end up placing css links far away from your js scripts in the html, like so:

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

Now, let's imagine a very basic workflow. You have your bare-bones HTML structure and you need to adjust its layout. You add a css reset (reset.css) and start styling your document in a Less file called style.less. If you add 

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

in the head of your document you won't be able to see any change as browsers do NOT understand .less files. These files need to be pre-processed and "translated" in css, so browsers can parse them and apply the given styles to the HTML page. So you'll run your (.less) file into a preprocessor which in turn will spit out a css file. So your <head> will be:

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

Notice that the styles.less file will NOT be referenced in the HTML, but only its CSS counterpart styles.css. When you'll be satisfied with your layout it'll be time to move on.

Here's now a good place for a build script to really shine. A build script will (among other things) concatenate external files of the same kind. In this case it will be able to merge these two files in a single one. Your new <head> will be:

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

The same thing will happen with js files at the bottom. From:

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

to:

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

As I said this is a very basic, rough example of a workflow using Less (or Sass/Scss, or Stylus) and a build script. I would say that Paul Irish gave the simplest and clearest representation of a build script in action in this video, which I highly recommend, especially because it features the HTML5 Boilerplate, as referenced in your question.

Hope this helped you better understanding, let me know if you have any doubts.

于 2013-03-15T02:11:00.203 回答