Grunt - 循环运行任务(saas，cssmin)

Question

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

文件夹1
- 萨斯
--.css

文件夹2
- 萨斯
--.css

文件夹3
- 萨斯
--.css

文件夹4
- 萨斯
--.css

要求：单独地，当 grunt 任务触发文件从日食保存时，它在每个项目上正常运行。但是，我想要的是通过发出 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(

3. 为每个文件夹的数组 sass 和 cssmin 增加了价值

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

   grunt.config.set("sass"， sass(;

   grunt.config.set("cssmin"， cssmin(;

5. 注册任务"sass"和"cssmin"

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

更正咕噜咕噜文件.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']);

};