Grunt动态dest位置sass [英] Grunt dynamic dest location sass

问题描述

这可能是一个重复的问题，但我不能找出我的需求的解决方案

This could possibly be a repeat question but I couldn't figure out a solution for my requirement

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

I am trying to create a sass grunt task which can generate css files in a dynamic location. Here is my structure

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

grunt任务可以创建一个相对于其组件的新文件夹

Can the grunt task create a new folder relative to its component i.e

/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文件

My current SASS task, generates CSS files in the same folder of SCSS

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 be： ['** / css /']

I understand we could achieve this by providing component folder name in the dest, for example for xyz component I could use dest as <%= yeoman.client %>/components/xyz/css. But I will have to write seperate task for each component. Is there a way to keep dest in the same parent folder without actually specifying the name of the folder? i.e src: ['**/scss/*.scss'] and dest be: ['**/css/'] Is there a way to do this?

推荐答案

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

You can use dynamic parameters to pass in the task:

例如：

grunt sass:xyz

可以使用类似这样的代码：

than in the code you can use something like this:

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

你必须设置的唯一的事情是一个通用的任务，执行它的所有组件，例如：

the only things that you must set is a generic task that execute it for all the components for example:

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

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

you can even generate an array and cycling it:

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

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

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

you can use even more parameters for setting dest and source:

grunt sass:xyz/sass:xyz/css

$ b b

并引用第二个参数：

and reference to the second parameter:

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

---

我找到一种方法来检索目录子目录）在一个基础内：

---

I found a way to retrive the directory(not sub-directory) inside a base one:

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

than you have an array(dirs) to use instead of [ 'xyz', 'abc' ]

这篇关于Grunt动态dest位置sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！