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

我很难找到解决这个问题的办法。我有一个更少的文件

app.less

，它只包含

@import

语句。现在我想生成一个包含所有导入的less文件的less文件，因为我想将它发送到客户端在那里编译它（是的，我有这样做的理由）

因此，不应在grunt构建步骤中编译less文件，而应将其连接起来，这样客户机就不必加载多个less文件。我觉得这是一个用例，在客户机上编译更少的代码时也应该出现，但我找不到一个解决方案。我不在乎连接是否使用

grunt contrib less

或任何其他工具进行。

less文档说：

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

见：和

您可以创建新文件，例如，

concatenate.less

和使用

inline

关键字导入

.less

文件。然后，如果您处理它，它将完全像串联一样工作，没有CSS被处理出来

连接。减少

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

并像以前一样使用Grunt任务，只需将输出文件扩展名重命名为

.less

，以清晰显示。经过测试，应该能给你想要的

嵌套导入

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

正如@seven phases max所指出的，在这种情况下，嵌套导入将是一个问题

解决办法是

• 使用

  grunt includes

  和

  includeRegexp

  选项创建

  concatenate.less

  中列出的文件，其中已将较少的文件导入其他文件夹
• 更改该文件夹的

  连接.less

  文件路径
• 正常运行较少编译的Grunt任务

---

如果有人正在与gulp合作

您只需将concatenate.less创建为@Rene Korss sugested，并使用与编译less相同的命令

较少的输出concatenate.css文件名，这在我们的案例中是误导性的， 所以我用我想要的名字命名文件名

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;
});

---

使用。好吧，我想这是可能的。但是，

grunt contrib concat

不理解更少的“

@import

语句。然后我基本上必须用

grunt contrib concat

配置文件替换我的

app.less

文件，这是我想要避免的。好地方。我以前从未见过像这样使用

（内联）

（好吧，它有不支持嵌套导入的问题，但仍然非常整洁）。谢谢@seven phases max！是的，嵌套导入会有问题。希望@Peter dosen在这种情况下没有嵌套导入。但我会努力找到任何好的筑巢方法。谢谢，这确实有效！幸运的是，我没有任何嵌套导入。事实上，我刚刚意识到这有什么坏处：因为导入的文件没有被处理，所以所有注释都保留在连接较少的文件中，这使得它比需要的文件长至少20%。我现在使用删除评论。是的，它不会删除评论。它只会连接.less文件，就像你第一次问的那样。但这是一个很好的解决方案。