使用自定义迭代排序进行Gulp连接

时间:2016-09-10 20:27:57

标签: gulp gulp-concat

我试图将嵌套目录结构中的多个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/'));
}));

这按我想要的顺序迭代,但我相信它将第一个顶级目录写为一个流,然后将第二个dir写为另一个流,以便第二个流覆盖第一个。所以我只剩下以下文件连接:

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

所以我也尝试使用add-stream插件在写入文件之前以递归方式添加到同一个流中。我不会让任何人知道细节,但基本上我也无法按照要求工作。任何人都可以推荐一个帖子/教程/插件?感谢。

1 个答案:

答案 0 :(得分:2)

echo '<li><input type="checkbox" name="scheck[]" value="'.$row['id'].'"'; if(isset($_SESSION['SELECT_SIZE_PRODUCTS'])) { $_SESSION['SELECT_SIZE_PRODUCTS'] = array(); if(is_array($_SESSION['SELECT_SIZE_PRODUCTS']) && in_array($row['id'], $_SESSION['SELECT_SIZE_PRODUCTS'])) { echo ' checked="checked"'; } } echo ' /> '.$row['size'].'</li>'; 尊重传递给它的globs的顺序,并以相同的顺序发出文件。这意味着如果你为每个组件显式传递一个glob到gulp.src(),它将首先发出第一个组件的文件,然后发出第二个组件的文件,依此类推:

gulp.src()

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

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