带有自定义迭代排序的 Gulp 连接答案

【问题标题】：Gulp concatenation with custom iteration ordering带有自定义迭代排序的 Gulp 连接
【发布时间】：2016-09-10 20:27:57
【问题描述】：

我正在尝试将嵌套目录结构中的多个 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 插件在写入文件之前递归地添加到同一个流中。我不会让任何人对细节感到厌烦，但基本上我也无法让它按预期工作。谁能推荐一个帖子/教程/插件？谢谢。

【问题讨论】：

标签： gulp gulp-concat

【解决方案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/'));
});

【讨论】：