Grunt - Aufgabe ausführen (Saas, Cssmin) in Schleife

Question

Ich versuche, Grunt zu implementieren, um den Prozess der CSS-Zusammenführung und Minification zu automatisieren. Mein Ordner-Struktur:

folder1
- sass
- css

folder2
- sass
- css

Ordner3
- sass
- css

ordner4
- sass
- css

Voraussetzung: Individuell wird die Grunzen Aufgabe richtig zu jedem Projekt laufen, wenn es Speichern von Eclipse auf Datei auslöst. Aber was ich will ist, den Minification-Prozess für alle Ordner durch die Ausgabe von grunt Befehl, d. H., Wenn ich "grunt" in cmd eingeben, sollte es durch den Ordner durchlaufen, um minimierte CSS für jeden zu generieren. Momentan erzeugt es die CSS für den letzten Ordner in jeder Iteration, da sich initconfig innerhalb der Schleife befindet.

Vereinfachte Version von Gruntfile.js (nur relevanten Code trägt):

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); 


}; 

Jede mögliche Hilfe würde sehr geschätzt, Danke.

Answer 1

Ich konnte das Problem beheben. Im Folgenden sind die Schritte:

1. Initialized Sass und cssmin Array

2. meine sass Aufgabe geändert Konfiguration von

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

   zu

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

(ähnlich wie cssmin)

3. Mehrwert zu Array Sass und cssmin für jeden Ordner

4. die Sass und cssmin Array Zuordnung zum Sass und cssmin Aufgabe bzw. grunt.config.set mit:

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

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

5. Register Aufgabe "Sass" und "cssmin"

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

Correct 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']); 


};