使用自定义迭代顺序的Gulp连接

我试图将嵌套目录结构中的多个js文件压缩到不同位置的单个文件中。它们必须以特定的顺序连接在一起，我找不到改变gulp的glob搜索检索嵌套文件的默认顺序的方法。我尝试过各种各样的glob模式，但都没有用

我的目录结构如下：

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

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/'));
}));

我希望文件按以下顺序连接到单个文件：

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

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

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

因此，gulp迭代到每个组件，并尽可能地向下迭代，然后再移动到下一个组件并执行相同的操作

而是按以下顺序连接：

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

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

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

换句话说，它进入一个顶级目录，遍历该目录中的每个顶级文件，然后跳转到下一个顶级目录并执行相同的操作，然后返回到第一个顶级目录并遍历下一个顶级目录等

我尝试了几种不同的方法，每种方法都有问题

我尝试使用gulp recursive folder插件定制迭代顺序，如下所示：

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

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/'));
}));

这会按照我想要的顺序进行迭代，但我相信它会将第一个顶级dir作为一个流写入，然后将第二个dir作为另一个流写入，这样第二个流就会覆盖第一个流。因此，我只剩下以下文件被连接：

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

因此，我还尝试使用addstream插件在写入文件之前递归地添加到同一个流中。我不会让任何人对细节感到厌烦，但基本上我也不能让它按预期工作。有人能推荐一个帖子/教程/插件吗？谢谢。

gulp.src（）尊重传递给它的glob的顺序，并以相同的顺序发送文件。这意味着，如果将每个组件的glob显式传递给

gulp.src（）

，它将首先发出第一个组件的文件，然后是第二个组件的文件，依此类推：

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

显然，您不希望手动维护该阵列。您要做的是基于项目中可用的组件生成阵列。您可以使用该模块进行以下操作：

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/'));
});