Grunt Sass配置：动态修改输出路径中的文件夹名称

刚好碰到过类似的需求，给你一个完美的动态配置方案，再也不用手动新增每个客户端的编译规则了！

你可以利用Grunt内置的动态文件映射功能，自动匹配所有client-*开头的文件夹，同时保留对应的目录结构输出CSS文件，完全适配后续新增的客户端目录。

修改后的grunt-sass配置代码如下：

module.exports = {
  options: {
    outputStyle: 'nested',
    precision: 3,
    sourceMap: true
  },
  main: {
    files: [{
      expand: true,           // 开启动态文件匹配模式
      cwd: 'resources/',      // 源文件的基础根目录
      src: ['client-*/scss/app.scss'], // 匹配所有客户端下的SCSS入口文件
      dest: 'resources/',     // 输出文件的基础根目录
      ext: '.css',            // 将SCSS后缀替换为CSS
      extDot: 'last',         // 只替换文件名里最后一个点后的后缀
      rename: function(dest, src) {
        // 核心：把路径中的/scss/替换为/css/，实现目录结构转换
        return dest + src.replace('/scss/', '/css/');
      }
    }]
  }
};

关键参数说明 #

• expand: true：必须开启这个参数，才能启用后续的动态路径匹配功能
• cwd: 'resources/'：指定所有源文件的基础目录，这样src里的路径是相对这个目录的，避免写重复的长路径
• src: ['client-*/scss/app.scss']：用通配符client-*匹配所有以client-开头的文件夹，精准定位每个客户端的SCSS入口文件
• rename函数：这是实现目录结构转换的核心，它会把源路径中的/scss/片段替换成/css/，这样就能自动把client-1/scss/app.scss编译到client-1/css/app.css

扩展适配 #

如果你的SCSS入口文件名不是固定的app.scss，比如是style.scss，只需要修改src里的文件名即可；如果每个客户端下有多个SCSS文件需要编译，也可以把src改成['client-*/scss/**/*.scss']，不过这种情况建议保持单个入口文件（通过SCSS的@import导入其他文件），这样编译后的CSS文件更整洁。

以后新增client-3、client-4这类文件夹时，只要里面有scss/app.scss，Grunt就会自动识别并编译到对应的css目录下，完全不用修改配置！

内容的提问来源于stack exchange，提问作者Boris56