G运行t - 运行循环中的任务（saas，cssmin）

Question

我正在尝试实施 Grunt 来自动执行 CSS 合并和缩小的过程。我的文件夹结构：

文件夹1
-- sass
-- css

文件夹2
-- sass
-- css

文件夹3
-- sass
-- css

文件夹4
-- sass
-- css

要求： 单独地，grunt 任务在从 eclipse 中触发文件保存时在每个项目上正确运行。但是，我想要的是通过发出 grunt 命令对所有文件夹执行缩小过程，即当我在 cmd 中键入 "grunt" 时，它应该循环遍历文件夹以为每个文件夹生成缩小的 css。目前，它正在为每次迭代中的最后一个文件夹生成 css，因为 initconfig 在循环内。

Gruntfile.js的简化版（仅携带相关代码）：

module.exports = function(grunt) {

    var tasks = [
        'grunt-contrib-cssmin','grunt-sass'
    ];

    tasks.forEach( function ( task ) {
        grunt.loadNpmTasks( task );
    });

    var folder  =['folder1', 'folder2', 'folder3', 'folder4'];

    var source;
    var csspath;
    var destination;

    for (var i = 0; i < folder.length; i ++ ) {         

            source=folder[i] + '/sass/*.scss';
            csspath=folder[i] + '/css/';
            destination=csspath + 'combined-styles.css';



            grunt.initConfig({

                config: {
                    destination: destination
                },
                sass: {
                    dist: {
                      files: {
                        '<%= config.destination %>' : [source]
                      }
                    },
                },
                cssmin: {
                   target: {
                    files: [{
                      expand: true,
                      cwd: csspath,
                      src: ['combined-styles.css'],
                      dest: csspath,
                      ext: '.min.css'
                    }]
                  }
               }

            });

        grunt.task.registerTask(folder[i], ['sass','cssmin']);
    }

    grunt.task.registerTask('default', folder);


};

非常感谢任何帮助，谢谢。

Answer 1

我能够解决这个问题。以下是步骤：

已初始化 sass 和 cssmin 数组

更改了我的 sass 任务配置

           files: {
                    '<%= config.destination %>' : [source]
                  }

到

            files: [{
                expand: true,
                cwd: scsspath,
                src: [source],
                dest: csspath,
                ext: '.css'
            }]

（类似于cssmin）

为数组 sass 和每个文件夹的 cssmin 添加值
使用 grunt.config.set:
分别将 sass 和 cssmin 数组分配给 sass 和 cssmin 任务
grunt.config.set("sass", sass);

grunt.config.set("cssmin", cssmin);
注册任务"sass"和"cssmin"

grunt.task.registerTask('default', ['sass','cssmin']);

正确Gruntfile.js：

module.exports = function(grunt) {

    var tasks = [
        'grunt-contrib-cssmin','grunt-sass'
    ];

    tasks.forEach( function ( task ) {
        grunt.loadNpmTasks( task );
    });

    var folder  =['folder1', 'folder2', 'folder3', 'folder4'];

    var source,csspath,scsspath;

    var sass={};
    var cssmin={};

    for (var i = 0; i < folder.length; i ++ ) {         

            scsspath=folder[i] + '/sass/';
            source='*.scss';
            csspath=folder[i] + '/css/';

            sass["folder"+i]= {
                 files: [{
                    expand: true,
                    cwd: scsspath,
                    src: [source],
                    dest: csspath,
                    ext: '.css'
                }]
            };

            cssmin["folder"+i]= {
                files: [{
                    expand: true,
                    cwd: csspath,
                    src: ['combined-styles.css'],
                    dest: csspath,
                    ext: '.min.css'
                }]
            };

    }

    grunt.config.set("sass", sass);
    grunt.config.set("cssmin", cssmin);

    grunt.task.registerTask('default', ['sass','cssmin']);


};

G运行t - 运行循环中的任务（saas，cssmin）

Grunt - run task(saas,cssmin) in loop

gruntjs

G运行t - 运行 循环中的任务（saas，cssmin）

Grunt - run task(saas,cssmin) in loop

gruntjs

G运行t - 运行循环中的任务（saas，cssmin）