Question

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

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

/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作为＆lt;％= yeoman.client％＆gt; / 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' ]
};

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

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

Grunt动态dest位置sass

1 个答案: