Grunt 动态 dest 位置 sass

Question

这可能是一个重复的问题，但我无法找到满足我要求的解决方案

我正在尝试创建一个可以在动态位置生成 css 文件的 sass grunt 任务。这是我的结构

/成分 --> xyz --> scss --> xyz.a.scss --> xyz.b.scss --> abc --> scss --> abc.a.scss --> abc.b.scss

grunt 任务能否创建一个相对于其组件的新文件夹，即

/成分 --> xyz --> scss --> xyz.a.scss --> xyz.b.scss --> CSS --> xyz.a.css --> xyz.b.css --> abc --> scss --> abc.a.scss --> abc.b.scss --> CSS --> abc.a.css --> abc.b.css

我当前的 SASS 任务，在 SCSS 的同一文件夹中生成 CSS 文件

sass: {
     dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.client %>/components/',
            src: ['**/*.scss'],
            dest: '<%= yeoman.client %>/components/',
            extDot: 'last',
            ext: '.css'
          }]
     }
},

我知道我们可以通过在 dest 中提供组件文件夹名称来实现这一点，例如对于 xyz 组件，我可以将 dest 用作 /components/xyz/css。但我将不得不为每个组件编写单独的任务。有没有办法在不实际指定文件夹名称的情况下将 dest 保存在同一个父文件夹中？即 src：['**/scss/*.scss'] 和 dest be：['**/css/'] 有没有办法做到这一点？

Answer 1

可以使用动态参数传入任务：

例如：

grunt sass:xyz

比在代码中你可以使用这样的东西：

sass: {
 dist: {
      files: [{
        expand: true,
        cwd: '<%= yeoman.client %>/components/',
        src: ['**/<%= grunt.task.current.args[0] %>/sass/*.scss'],
        dest: '<%= yeoman.client %>/components/<%= grunt.task.current.args[0] %>/css',
        extDot: 'last',
        ext: '.css'
      }]
 }
},

您必须设置的唯一内容是为所有组件执行它的通用任务，例如：

grunt.registerTask('sassAll', [ 'sass:xyz', 'sass:abc' ]);

您甚至可以生成一个数组并循环它：

grunt.registerTask('sassAll', function() {
    gruntUtils.sassTasks.forEach(function(param){
        grunt.task.run('sass:' + param);
    });
});

var gruntUtils = {
    sassTasks : [ 'xyz', 'abc' ]
};

您可以使用更多参数来设置 dest 和 source：

grunt sass:xyz/sass:xyz/css

并引用第二个参数：

<%= grunt.task.current.args[1] %>

---

我找到了一种方法来检索基础目录中的目录（不是子目录）：

var templates = grunt.file.expand({
                filter: "isDirectory", 
                cwd: "(your base dir path in relation to the gruntfile.js)/components"
                },["*"]);

var dirs = templates.map(function (t) {
    return t;
});

比你有一个数组（dirs）来代替[ 'xyz', 'abc' ]