Grunt Sass:更改目标路径上的一个文件夹名

Question

如何在SCSS源代码以外的文件夹中生成CSS文件，但保留其中的一部分？

让我解释一下，我有几个.scss源的不同文件夹：

resources/client-1/scss/app.scss
resources/client-2/scss/app.scss

我希望CSS在css文件夹中生成这个位置，而不是scss。所以：

resources/client-1/css/app.scss
resources/client-2/css/app.scss

但是我特别希望有一个动态配置，因为客户端-x文件夹的数量将随着时间的推移而增加。

有什么想法吗？谢谢。

编辑：

我使用grunt-sass的配置目前如下：

module.exports = {
  options: {
    outputStyle: 'nested',
    precision: 3, 
    sourceMap: true
  },
  main: {
    files: {
      'resources/clients-1/css/style.css': ['resources/clients-1/scss/style.scss' ],
      'resources/clients-2/css/style.css': [ 'resources/clients-2/scss/style.scss' ]
    }
  }
};

Answer 1

您可以使用动态构建文件对象 (而不是使用当前正在使用的文件对象格式 )，并利用重命名属性为每个生成的.css文件创建新的目标路径。

将您的files属性替换为以下内容：

files: [{
  expand: true,
  cwd: 'resources',
  src: ['**/*.scss'],
  dest: 'resources/', // <-- Value must match `cwd` value and 
                      //     include trailing forward slash.
  ext: '.css',
  rename: function(dest, src) {
    var parts = src.split('/');
    parts.splice(1, 1, 'css');

    return dest + parts.join('/');
  }
}]

解释：

1. 在rename函数的主体中，我们首先通过一行将src路径拆分为一个数组，行内容如下： var parts = src.split('/')； 给定'resources/clients-1/scss/style.scss'的示例源路径，这将导致为parts变量分配一个数组，如下所示： ‘’clients 1‘，'scss'，'style.scss’
2. 然后，我们在行读取中使用splice()： parts.splice(1，1，'css')； 这将索引1处的值(即'scss')替换为给定的'css'值。现在，parts数组的结果是： ‘’clients 1‘，'css'，'style.scss’
3. 最后，行文如下： 返回dest + parts.join('/')； 我们从函数中返回一个用于dest路径的新字符串。鉴于前面的示例，dest路径如下： “资源/客户-1/css/style.css” 因为ext属性的值为.css，所以grunt将原始的.scss扩展名替换为.css。

注：

如果您的resources文件夹包含包含.scss文件的子文件夹，则您不希望生成.css文件，则需要使用球状图案否定它们。例如，假设您的resources目录如下所示：

.
├── resources
│   ├── clients-1
│   │   └── scss
│   │      └── style.scss
│   ├── clients-2
│   │   └── scss
│   │      └── style.scss
│   ├── foo
│   │   └── scss
│   │      └── style.scss
│   └── quux
│       └── scss
│          └── style.scss
└── ...

假设您不希望为存在于文件夹.css和quux中的.scss文件生成foo文件(也就是说，您只想处理文件夹clients-1和clients-2)。

在这种情况下，需要将上面提供的代码示例中的src属性更改为：

src: ['{,!(foo|quux)/**/}*.scss'],