Gulp 与自定义迭代排序的串联

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 插件在写入文件之前递归地添加到同一个流中。我不会让任何人厌烦细节，但基本上我也无法让它按预期工作。谁能推荐一个post/tutorial/plugin？谢谢。

Answer 1

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

显然您不想手动维护该数组。您要做的是根据项目中可用的组件生成数组。您可以为此使用 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/'));
});

Gulp 与自定义迭代排序的串联

Gulp concatenation with custom iteration ordering

gulp

gulp-concat