使用自定义迭代顺序进行串联

Question

我试图在一个嵌套的目录结构内连接多个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

我希望这些文件按照以下顺序连接到一个文件:

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

这样gulp就会迭代到每个组件，并在移动到下一个组件之前尽可能地向下迭代。

相反，它按以下顺序连接:

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

换句话说，它进入一个顶级目录，遍历该目录中的每个顶级文件，然后跳转到下一个顶级目录并做同样的事情，然后返回到第一个顶级目录并遍历下一层等等

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

我已经尝试使用gulp-recursive-folder插件来自定义迭代顺序，如下所示:

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

按我想要的顺序迭代，但我相信它是将第一个顶级目录写入一个流，然后将第二个目录写入另一个流，以便第二个流覆盖第一个流。因此，我只剩下以下文件被连接:

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

所以我也试过使用add-stream插件在写入文件之前递归地添加到同一流。我不会让任何人感到厌烦的细节，但基本上我也不能让它像预期的那样工作。谁能推荐一个帖子/教程/插件?谢谢。

Answer 1

gulp.src()尊重传递给它的globs的顺序，并以相同的顺序发出文件。这意味着如果您显式地将每个组件的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/'));
});

显然你不想手动维护这个数组。您要做的是根据项目中可用的组件生成数组。您可以使用glob模块:

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