Gulp中Concat+Uglify合并JS时顺序错乱问题排查

我尝试按特定顺序合并（concat）并压缩（uglify）JavaScript文件。关闭Uglify时，文件能按指定顺序正常合并；但开启Uglify后，JS文件的顺序被忽略。请问我哪里操作出错了？

Script_1.js代码：

let script_one = () => { console.log(1); };

Script_2.js代码：

let script_two = () => { console.log(2); };

Gulp任务代码：

gulp.task('js', function() {
  return gulp.src(['js/Script1.js', 'js/Script2.js'])
    .pipe(rigger())
    .pipe(concat('main.js'))
    .pipe(babel({presets: ['env']}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

嘿，这个问题我之前踩过坑！大概率是Uglify的优化逻辑悄悄打乱了代码顺序，咱们一步步排查解决：

• 先给Uglify加限制配置，禁用干扰顺序的优化
  默认情况下Uglify会做变量提升、语句合并这类优化，很可能会调整代码位置。你可以先给uglify()传个配置，关掉这些可能影响顺序的选项测试：

.pipe(uglify({
  mangle: false, // 先禁用混淆验证问题
  compress: {
    sequences: false, // 禁止合并语句序列
    hoist_funs: false, // 禁止自动提升函数声明
    hoist_vars: false // 禁止自动提升变量声明
  }
}))

如果顺序恢复正常了，再逐个开启需要的优化项，找到具体是哪个选项在搞鬼。

• 排查rigger插件的影响
  你当前的流程里用了rigger()，有些文件导入类插件可能会和压缩工具产生兼容性问题，偷偷改变流的文件顺序。可以先去掉rigger()试试，如果顺序正常了，再去查该插件和uglify的适配方案。

• 检查隐式依赖导致的压缩异常
  要是实际项目里两个文件存在变量/函数依赖，Uglify可能会因为误判“未使用代码”而调整顺序甚至删除代码。这种情况下可以给Uglify加配置保留函数名，避免依赖识别错误：

.pipe(uglify({
  mangle: {
    keep_fnames: true
  }
}))

• 更新插件版本
  老版本的gulp-uglify、gulp-concat或者babel插件可能存在兼容性bug，导致顺序错乱。试试把这些插件更新到最新稳定版，说不定问题直接就解决了。

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