为何Gulp合并输出的JS文件顺序错误？如何调整合并顺序？

嘿，我太懂你这个困扰了——依赖库还没加载，自己的代码先跑了，肯定要出一堆控制台错误对吧？你的问题根源其实出在merge2的使用方式上，它并行处理多个流的特性刚好打乱了你想要的文件顺序。

最简单的修复：丢掉merge2，直接用src处理路径数组 #

Gulp的src方法本身就支持接收一个文件路径数组，而且会严格按照你数组里的顺序读取和处理文件，完全不需要额外用merge2来多此一举。

把你的jsTask改成这样就行：

function jsTask(){
  return src(files.jsSrcPath)
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(dest(files.jsDstPath));
}

如果你需要匹配子文件夹里的所有JS文件 #

看你提到“子文件夹中的代码片段”，可能你原本的js/*.js只是匹配了js根目录下的文件，没包含子文件夹？如果是这样，把路径改成js/**/*.js就能匹配所有层级的JS文件，同时依然保持先jQuery、再Bootstrap、最后是你自己代码的顺序：

修改后的files对象：

const files = {
  jsSrcPath: [
    '../node_modules/jquery/dist/jquery.js',
    '../node_modules/bootstrap/dist/js/bootstrap.js',
    'js/**/*.js' // 匹配js文件夹下所有子目录的JS文件
  ],
  jsDstPath: '../public/js'
}

为啥原来的写法会乱序？ #

当你用merge2把每个路径单独生成一个src流时，这些流是并行运行的。你自己的JS文件因为数量少、读取速度快，会先被concat接收，所以就跑到了文件顶部。而直接用src(files.jsSrcPath)，Gulp会严格按照数组顺序先处理jQuery，再处理Bootstrap，最后才处理你自己的所有JS文件，完美符合预期。

内容的提问来源于stack exchange，提问作者Derrick Miller