Grunt Sass：更改目标路径上的一个文件夹名称答案

【问题标题】：Grunt Sass: change one folder name on destination pathGrunt Sass：更改目标路径上的一个文件夹名称
【发布时间】：2018-05-25 20:44:24
【问题描述】：

如何在 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

但我特别想有一个动态配置，因为client-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' ]
    }
  }
};

【问题讨论】：

您使用的是哪个编译器？你能告诉我们你的Gruntfile.js吗？

标签： sass gruntjs

【解决方案1】：

您可以build the files object dynamically（而不是使用您当前正在使用的Files Object Format），并利用rename 属性为每个生成的.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('/');
  }
}]

说明：

在rename 函数的主体中，我们首先通过以下行将src 路径拆分为一个数组：
```
var parts = src.split('/');
```
鉴于您的示例源路径 'resources/clients-1/scss/style.scss'，这将导致分配给 parts 变量的数组，如下所示：
```
['clients-1', 'scss', 'style.scss']
```
然后我们在行阅读中使用splice()：
```
parts.splice(1, 1, 'css');
```
这会将索引 1 处的值（即'scss'）替换为给定值'css'。 parts 数组现在结果如下：
```
['clients-1', 'css', 'style.scss']
```
最后，通过以下行：
```
return dest + parts.join('/');
```
我们从函数返回dest 路径的新字符串。鉴于前面的示例，dest 路径将是这样的：
```
'resources/clients-1/css/style.css'
```
由于ext 属性的值为.css，grunt 将原来的.scss 扩展名替换为.css。

注意：

如果您的resources 文件夹包含包含.scss 文件的子文件夹，您不想想要生成.css 文件，您需要使用来否定它们globbing pattern。例如，假设您的 resources 目录如下所示：

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

假设您不想为存在于文件夹foo 和quux 中的.scss 文件生成.css 文件（即您只想处理文件夹clients-1 和clients-2） .

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

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

【讨论】：