Grunt - 在循環中運行任務（saas，cssmin）

Question

我試圖實現Grunt來自動完成CSS合併和縮小的過程。我的文件夾結構：

文件夾1
- 青菜
- CSS

文件夾2
- 青菜
- CSS

folder3
- 青菜
- CSS

folder4
- 薩斯
- CSS

要求：獨立，繁重的任務是否正確每個項目運行時，它在文件從日食觸發保存。但是，我想要的是通過發出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. 初始化青菜和cssmin陣列

2. 改變了我的青菜任務配置從

     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任務分別每個文件夾

：

咕嚕。 config.set（「sass」，sass）;

grunt.config.set（「cssmin」，cssmin）;

註冊任務 「青菜」 和 「cssmin」

grunt.task.registerTask（ '默認'，[ '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']); 


};