带有 grunt-contrib-less 的 Grunt 任务 - 如何编译多个样式表同时保持其原始 .less 文件名

Question

我正在使用更少的 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.
    }]
}