gruntjs - 如何使用 grunt 将几个较少的文件连接(而不是编译)为一个

Question

我很难找到解决此问题的方法。我有一个较少的文件 app.less，它只包含 @import 语句。现在我想生成一个包含所有导入的 less 文件的 less 文件，因为我想将它发送到客户端以在那里编译它(是的，我有理由这样做)。

所以在 grunt 构建步骤中不应该编译 less 文件，而只进行连接，这样客户端就不必加载几个 less 文件。我觉得这是一个在客户端上编译较少时也应该出现在其他人身上的用例，但我找不到单一的解决方案。我不在乎连接是否发生在 grunt-contrib-less 或任何其他工具上。

Answer 1

LESS 文档说:

Use @import (inline) to include external files, but not process them.

参见: Import At-Rules 和 @import (inline)

您可以创建新文件，例如 concatenate.less 并使用 .less 关键字导入 inline 文件。然后如果你处理它，它会像连接一样工作，不会处理任何 CSS。

concatenate.less

@import (inline) "file1.less"
@import (inline) "file2.less"
@import (inline) "file3.less"

并像以前一样使用您的 Grunt 任务，只需将输出文件扩展名重命名为 .less 即可。测试了一下，应该给你你想要的。

嵌套导入

正如@seven-phases-max 指出的那样，在这种情况下，嵌套导入将成为问题。

解决方案是 grunt-includes 。

使用 grunt-includes 和 includeRegexp 选项来创建 concatenate.less 中列出的文件，其中已导入 LESS 文件到其他文件夹。

将 concatenate.less 文件路径更改为该文件夹。

正常运行 LESS 编译 Grunt 任务。