Grunt动态目标位置sass

Question

Grunt动态目标位置sass

3

这可能是一个重复的问题，但我找不到适合我的需求的解决方案。我正在尝试创建一个sass grunt任务，可以在动态位置生成css文件。这是我的结构：

/components --> xyz --> scss --> xyz.a.scss --> xyz.b.scss --> abc --> scss --> abc.a.scss --> abc.b.scss

grunt任务能否创建一个相对于组件的新文件夹，如下所示：

/components --> 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作为<%= yeoman.client %>/components/xyz/css。但是，我将不得不为每个组件编写单独的任务。是否有一种方法可以在不实际指定文件夹名称的情况下将目标保留在同一父文件夹中？也就是说，src：['**/scss/*.scss']，而dest是：['**/css/']。有没有办法做到这一点？

- Srikanth Kondaparthy

只是想澄清一下，[编辑]你有一个Sass文件，你希望每个项目将其处理到不同的位置？你运行它一次，然后输出CSS到哪里？所有项目都在一起吗？我不理解你试图实现的逻辑或原因。 - suzumakes

抱歉如果我的问题不够清晰。忽略项目的事情，我已经编辑了问题。希望它有意义。 - Srikanth Kondaparthy

据我所知，您的样式有四个层次结构（组件>文件夹>css | scss>文件）。您想知道Grunt是否可以命名第二级容器文件夹并将其递归到所有组件中？看起来您有一个项目架构问题。如果每个组件只有一个scss文件，则根本不需要这个第二级文件夹。只需将所有scss组件放在一个文件夹中，并将它们输出到CSS文件夹中即可。也许我漏掉了什么... - serraosays

你理解需求得很准确 @staypuftman 我能补充的唯一细节是每个组件中有多个scss文件。 - Srikanth Kondaparthy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Emanuele Parisio · Accepted Answer

您可以使用动态参数来传递任务：

例如：

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' ]
};

您可以使用更多参数来设置目标和源：

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' ]