如何使用 grunt 将几个较少的文件连接（而不是编译）成一个文件答案

【问题标题】：How to concatenate (and not compile) several less files into one using grunt如何使用 grunt 将几个较少的文件连接（而不是编译）成一个文件
【发布时间】：2023-04-11 12:01:01
【问题描述】：

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

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

【问题讨论】：

使用grunt-contrib-concat。
好吧，我想这是可能的。但是grunt-contrib-concat 不了解更少'@importstatements。然后我基本上必须用grunt-contrib-concat 配置文件替换我的app.less 文件，这是我希望避免的。

标签： gruntjs less grunt-contrib-less

【解决方案1】：

LESS 文档说：

使用@import（内联）包含外部文件，但不处理它们。

请参阅：Import At-Rules 和 @import (inline)

您可以创建新文件，例如 concatenate.less 并使用 inline 关键字导入 .less 文件。然后，如果您对其进行处理，它将完全像连接一样工作，不会从中处理任何 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 任务。

【讨论】：

好地方。我以前从未见过像这样使用(inline)（嗯，这有不支持嵌套导入的问题，但仍然非常整洁）。
感谢@seven-phases-max！是的，嵌套导入会是个问题。希望@Peter 在这种情况下没有嵌套导入。但我会尝试找到任何好的嵌套解决方案。
谢谢，确实有效！幸运的是，我没有任何嵌套导入。
其实我才意识到这样做的缺点是：因为导入的文件没有被处理，所有的 cmets 都保留在 concatenated less 文件中，这使得它比需要的时间至少长 20%是。我现在正在使用grunt-stripcomments 删除 cmets。
是的，它不会删除 cmets。它只会连接 .less 文件，就像你第一次问的那样。但是很好的解决方案。

【解决方案2】：

如果有人正在使用 gulp，

您可以按照@Rene Korss 的建议创建 concatenate.less，并使用与编译 less 相同的命令。

输出 concatenate.css 文件名较少，这在我们的例子中是误导性的，所以我使用gulp-rename 来命名我想要的文件名。

var src = 'path-to-concatenate-less-file';
var destination = 'path-to-destination';
gulp.task('concatenate-styles', function () {
    var compile= gulp.src(src)
    .pipe(less())
    .pipe(rename('concatenate-all.less'))
    .pipe(gulp.dest(destination))
    .pipe(notify("Saved file: <%= file.relative %>!"));
    compile.on('error', console.error.bind(console));
    return compile;
});

concatenate.less 示例：

@import (inline) "general.less";
@import (inline) "typography.less";

【讨论】：