Grunt 动态目标位置 sass

Question

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

我正在尝试创建一个 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。但是我将不得不为每个组件编写单独的任务。有没有办法在不实际指定文件夹名称的情况下将 dest 保留在同一个父文件夹中？即 src: ['**/scss/*.scss'] 和 dest 是: ['**/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 动态目标位置 sass

Grunt dynamic dest location sass

css

sass

gruntjs

yeoman

grunt-contrib-sass