使用 grunt-contrib-less 的 Grunt 任务——如何在保持原始 .less 文件名的同时编译多个样式表

Question

我正在使用 less Bootstrap 构建一个网站。我使用 grunt 来自动执行任务。

在我的 gruntfile.js 我有这部分：

less: {
  compileCore: {
    options: {
      strictMath: true,
      sourceMap: true,
      outputSourceFiles: true,
      sourceMapURL: '<%= pkg.name %>.css.map',
      sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
    },
    src: 'less/bootstrap.less',
    dest: 'dist/css/<%= pkg.name %>.css'
  },
  compileBrandingStyles: {
    options: {
      strictMath: true,
      sourceMap: false,
      outputSourceFiles: false
    },
    src: 'less/branding/**/*.less',
    dest: 'dist/css/<%= what do I put here? %>.css'
  }
},

在 "compileBrandingStyles" 中，我想获取文件夹中的所有 *.less 文件，并将它们编译成具有原始文件名的单独 css 文件。没有串联。

在文件夹中：less/branding 我有 x 个 .less 文件：

theme-1.less
theme-2.less
theme-3.less
theme-4.less

我想将它们输出到 dist/css/ 文件夹中，如下所示：

theme-1.css
theme-2.css
theme-3.css
theme-4.css

那么这部分应该怎么写才能保留他们的文件名呢？

dest: 'dist/css/<%= what do I put here? %>.css'

Answer 1

将您的 compileBrandingStyles 目标重新配置为此：

// ...
compileBrandingStyles: {
    options: {
        strictMath: true,
        sourceMap: false,
        outputSourceFiles: false
    },
    files: [{
        expand: true,
        cwd: 'less/branding/',
        src: ['**/*.less'],
        dest: 'dist/css/',
        ext: '.css'
    }]
}

在 grunt docs 中查看更多信息。

编辑

如果您不希望目标文件夹中包含子文件夹，请使用 flatten。

// ...
compileBrandingStyles: {
    options: {
        strictMath: true,
        sourceMap: false,
        outputSourceFiles: false
    },
    files: [{
        expand: true,
        cwd: 'less/branding/',
        src: ['**/*.less'],
        dest: 'dist/css/',
        ext: '.css',
        flatten: true // <-- Remove all path parts from generated dest paths.
    }]
}

使用 grunt-contrib-less 的 Grunt 任务——如何在保持原始 .less 文件名的同时编译多个样式表

Grunt task with grunt-contrib-less - how to compile multiple stylesheets while maintaining their original .less file name

gruntjs

grunt-contrib-less