Grunt - 在循环中运行任务（saas，cssmin）

Question

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

文件夹 1
-- 萨斯
--css

文件夹2
-- 萨斯
--css

文件夹3
-- 萨斯
--css

文件夹4
-- 萨斯
--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

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

1. 已初始化 sass 和 cssmin 数组

2. 从

   更改了我的 sass 任务配置

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

   到

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

（类似于cssmin）

1. 为每个文件夹的数组 sass 和 cssmin 添加了值

2. 使用 grunt.config.set 将 sass 和 cssmin 数组分别分配给 sass 和 cssmin 任务：

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

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

3. 注册任务“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']);


};