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

Question

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

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

Answer 1

LESS 文档说：

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

参见：Import At-Rules and @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 任务正常。

Answer 2

万一有人在使用 gulp，

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

Less outputs 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";

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

How to concatenate (and not compile) several less files into one using grunt

less

gruntjs

grunt-contrib-less