如何使用 Gulp、Uglify 和 Concat 生成有效的 Source Maps？答案

【问题标题】：How can I generate valid Source Maps with Gulp, Uglify & Concat?如何使用 Gulp、Uglify 和 Concat 生成有效的 Source Maps？
【发布时间】：2015-05-17 00:09:28
【问题描述】：

有没有人找到 Gulp、Uglify 和 Concat 的有效组合来生成有效的源映射？ GitHub 中似乎有很多关于这类交互的问题，但同样人们似乎已经找到了成功的组合。我尝试了很多变体，但是当我打开 uglify 时，符号映射不起作用，断点在浏览器中也不能正常工作。例如，以下工作正常：

return gulp.src('/scripts/*.js')
            .pipe(sourcemaps.init())
            //.pipe(uglify())
            .pipe(concat(outputName + '.min.js'))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(outputPath))
            .on('end', function() { gutil.log('Minified ' + outputName); })
            .on('error', handleError);

但取消注释 uglify 并没有。

我创建了一个 GitHub 存储库来重现该问题：https://github.com/jamescrowley/gulpIssues

【问题讨论】：

奇怪...我试过你的sn-p，它工作得很好...你能添加package.json吗？当gulp-uglify 在 2.4.19 冻结时，我觉得你有 uglify-js 的 2.4.21 版本很奇怪。
gist.github.com/jamescrowley/e56e9f591d6a86011f12 - 虽然我可能会尝试重新安装它们。你能确认哪种组合对你有用吗？
我会在我再次使用 PC 时尝试。同时尝试摆脱uglify.js。 gulp-uglify 自带 uglify.js 依赖，可能会互相干扰
@ddprrt 我创建了一个小型仓库来重现该问题 - github.com/jamescrowley/gulpIssues - 如果您有任何见解，我将不胜感激！
@ddprrt btw，我已经验证这也是 OS x 上的问题

标签： javascript gulp uglifyjs source-maps gulp-uglify

【解决方案1】：

我们一直把它用作：

.pipe(sourcemaps.init())
.pipe(concat('app.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('app.js'))

这对我来说似乎很好用。它将源映射输出到文件本身。

版本：

"browser-sync": "^2.2.4",
    "gulp": "^3.8.6",
    "gulp-concat": "^2.3.4",
    "gulp-ng-annotate": "^0.2.0",
    "gulp-rename": "^1.2.0",
    "gulp-replace": "^0.4.0",
    "gulp-sourcemaps": "^1.1.0",
    "gulp-uglify": "^0.3.1",
    "gulp-util": "^2.2.20"

【讨论】：

感谢@Phil - 我在我的示例存储库中也尝试过这个，但我仍然看到同样的问题。你能分享你正在运行的特定版本吗？
@JamesCrowley 更新了版本，不过已经很老了。
不幸的是，这仍然不起作用。大问我知道，但如果你有机会，你能用我的 GitHub 存储库重现这个问题吗？我们已经在多台机器和版本上进行了测试，发现了同样的不良行为 - 不确定我们缺少什么。
.pipe(sourcemaps.write()) 是这里的关键，以确保将地图添加为 串联 js 的一部分。这在连接先前已转译的代码时有效，例如使用 Babel。

【解决方案2】：

如果有人遇到此问题并找到此答案：这不起作用的原因是因为您不能通过一次 sourcemaps.init() 调用“源映射”更多转换。这种组合对我有用

return gulp.src('/scripts/*.js')
            .pipe(sourcemaps.init())
            .pipe(uglify())
            .pipe(sourcemaps.write())
            .pipe(sourcemaps.init())
            .pipe(concat(outputName + '.min.js'))
            .pipe(sourcemaps.write())
            .pipe(gulp.dest(outputPath))
            .on('end', function() { gutil.log('Minified ' + outputName); })
            .on('error', handleError);

【讨论】：