gruntjs - 带有 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.
    }]
}