如何使用grunt将少量文件连接(而不是编译)到一个文件中

Pet*_*ter 4 less gruntjs grunt-contrib-less

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

因此,不应该在grunt构建步骤中编译较少的文件,而是仅连接,以便客户端不必加载少量文件.我觉得这是一个用户,在客户端编译时应该为其他人出现,但我找不到一个解决方案.我不关心连接是否发生grunt-contrib-less或任何其他工具.

Ren*_*rss 7

LESS文档说:

使用@import(内联)包含外部文件,但不处理它们.

请参阅:导入选项@import(内联)

例如concatenate.less,您可以创建新文件,并.less使用inline关键字导入文件.然后,如果你处理它,它将完全像连接,没有处理CSS.

concatenate.less

@import (inline) "file1.less"
@import (inline) "file2.less"
@import (inline) "file3.less"
Run Code Online (Sandbox Code Playgroud)

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

嵌套导入

正如@ seven-phases-max指出的那样,嵌套导入在这种情况下会出现问题.

解决方案将是grunt-includes.

  • 使用grunt-includeswith includeRegexp选项可以将concatenate.less已导入的LESS文件中列出的文件创建到其他文件夹.
  • concatenate.less文件路径更改为该文件夹.
  • 正常运行您的LESS编译Grunt任务.