Grunt - exécuter la tâche (saas, cssmin) dans la boucle

Question

J'essaie d'implémenter Grunt pour automatiser le processus de fusion et de minification CSS. Mon dossier Structure:

folder1
- SASS
- css

dossier2
- SASS
- css

folder3
- SASS
-

css

folder4
- SASS
- css

Exigence: Individuellement, la tâche de grunt fonctionne correctement sur chaque projet quand il se déclenche Enregistrer le fichier d'éclipse. Mais, ce que je veux est d'exécuter le processus de minification pour tous les dossiers en émettant une commande grunt, c'est-à-dire quand je tape "grunt" dans cmd, il devrait parcourir le dossier pour générer des css minifiés pour chacun. Actuellement, il génère le fichier css pour le dernier dossier de chaque itération alors que initconfig se trouve dans la boucle.

Version simplifiée de Gruntfile.js (portant uniquement code):

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


}; 

Toute aide serait très appréciée, Merci.

Answer 1

J'ai été en mesure de résoudre le problème. Voici les étapes:

1. Initialisé tableau SASS et cssmin

2. Changé ma configuration de la tâche SASS de

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

   à

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

(similaire à cssmin)

3. Valeur ajoutée à un tableau SASS et cssmin pour chaque dossier

4. affecté le tableau de SASS et cssmin Sass et tâche de cssmin respectivement en utilisant grunt.config.set:

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

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

5. tâche de registre "sass" et "cssmin"

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

Gruntfile.js: Corriger

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


};