Concaténation en gulp avec ordre d'itération personnalisé

Question

Je tente de concaténer un certain nombre de fichiers js dans une structure de répertoire imbriquée en un seul fichier dans un emplacement différent. Ils doivent être concaténés dans un ordre spécifique et je ne trouve pas un moyen de changer l'ordre par défaut dans lequel la recherche globale de gulp récupère les fichiers imbriqués. J'ai essayé divers modèles glob en vain.

Ma structure de répertoire est comme suit:

components 

- componentA 
    - controllers 
    - controllerA1.js 
    - controllerA2.js 
    - services 
    - serviceA1.js 
    - configA.js 
    - moduleA.js 

    - componentB 
    - controllers 
    - controllerB1.js 
    - controllerB2.js 
    - services 
    - serviceB1.js 
    - configB.js 
    - moduleB.js 

Je veux les fichiers à concaténer dans un seul fichier dans l'ordre suivant:

configA.js 
moduleA.js 
controllerA1.js 
controllerA2.js 
serviceA1.js 

configB.js 
moduleB.js 
controllerB1.js 
controllerB2.js 
serviceB.js 

Alors que Gulp itère dans chaque composant et itère vers le bas autant que possible avant de passer au composant suivant et de faire de même.

lieu concatène dans l'ordre suivant:

configA.js 
moduleA.js 
configB.js 
moduleB.js 
controllerA1.js 
controllerA2.js 
serviceA1.js 
controllerB1.js 
controllerB2.js 
serviceB1.js 

En d'autres termes, il va dans un répertoire de haut niveau, itère à travers chacun des fichiers de haut niveau dans ce répertoire, puis saute au prochain répertoire de niveau supérieur et fait la même chose, avant de retourner au premier répertoire de niveau supérieur et d'itérer par le prochain niveau vers le bas etc.

J'ai essayé quelques méthodes différentes qui ont chacune présenté des problèmes.

J'ai essayé d'utiliser le plug-in gulp récursif-dossier pour personnaliser l'ordre d'itération comme suit:

gulp.task('generateTree', recursivefolder({ 
     base: './components', 
     exclude: [ // exclude the debug modules from thus build 
      //'debug-modules' 
     ] 
    }, function(folderFound){ 
    //This will loop over all folders inside pathToFolder main and recursively on the children folders, secondary 
    //With folderFound.name gets the folderName 
    //With folderFound.path gets all folder path found 
    //With folderFound.pathTarget gets the relative path beginning from options.pathFolder 
    return gulp.src(folderFound.path + "/**/*.js") 
      .pipe($.concat("app.js")) 
      .pipe(gulp.dest('./build/assets/js/')); 
})); 

Ce itère dans l'ordre que je veux, mais je crois qu'il est en train d'écrire le premier répertoire de haut niveau comme l'un flux et ensuite en écrivant le deuxième dir comme un autre flux de sorte que le deuxième flux écrase le premier. Je suis parti avec seulement les fichiers suivants sont concaténés:

configB.js 
moduleB.js 
controllerB1.js 
controllerB2.js 
serviceB.js 

J'ai aussi essayé d'utiliser le plug-in add-stream pour récursive ajouter au même flux avant d'écrire un fichier. Je ne ennuierai personne avec les détails mais fondamentalement je ne peux pas obtenir ceci pour fonctionner comme désiré non plus. Quelqu'un peut-il recommander un post/tutoriel/plugin? Merci.

Answer 1

gulp.src() respecte l'ordre des globs qui lui sont passés et émet des fichiers dans le même ordre. Cela signifie que si vous passez explicitement un glob pour chaque composant gulp.src() il va d'abord émettre les fichiers pour le premier composant, puis pour le second composant et ainsi de suite:

gulp.task('default', function() { 
    return gulp.src([ 
     'components/componentA/**/*.js', 
     'components/componentB/**/*.js' 
    ]) 
    .pipe($.concat('app.js')) 
    .pipe(gulp.dest('./build/assets/js/')); 
}); 

Il est évident que vous ne voulez pas maintenir ce tableau manuellement. Ce que vous voulez faire est de générer le tableau en fonction des composants disponibles dans votre projet. Vous pouvez utiliser le module glob pour cela:

var glob = require('glob'); 

gulp.task('default', function() { 
    return gulp.src(glob.sync('components/*').map(c => c + '/**/*.js')) 
    .pipe($.concat('app.js')) 
    .pipe(gulp.dest('./build/assets/js/')); 
});