3

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

我正在尝试创建一个可以在动态位置生成 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 用作 <%= yeoman.client %>/components/xyz/css。但我将不得不为每个组件编写单独的任务。有没有办法在不实际指定文件夹名称的情况下将 dest 保存在同一个父文件夹中？即 src: ['**/scss/*.scss']and dest be:['**/css/'] 有没有办法做到这一点？

4

1 回答 1

2

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

例如：

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;
});

比你有一个 array( dirs) 来代替[ 'xyz', 'abc' ]

于 2016-03-11T10:20:33.497 回答