源图使用gulp，Browserify，reactify，UglifyJS
我正在尝试为使用Chrome的JavaScript文件获取源地图。 当前gulp脚本的问题在于源映射（即Browserify创建的）会导致文件的缩小版本。
例如，假设app.jsx是Browserify的输入文件，并且它require('a')和require('b')调用。 app.jsx会按预期进行浏览，重新定义和uglify并写入app.js。 但是，模块a和模块b中的所有源映射引用也被缩小：
var gulp = require('gulp'),
browserify = require('browserify'),
watchify = require('watchify'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
bundler;
bundler = browserify({
entries: '/app.jsx',
cache: {},
packageCache: {},
fullPaths: true
});
bundler
.transform('reactify');
.transform({
global: true
}, 'uglifyify');
bundler = watchify(bundler);
bundler.on('update', function() {
return bundler
.bundle()
.pipe(source('app.js'))
.pipe(buffer())
.pipe(gulp.dest('/js'));
});
任何想法如何得到这个工作？
看起来这是uglifyify的一个问题（https://github.com/hughsk/uglifyify/issues/16）。 它似乎只是不知道如何生成源地图。
有一些替代方案：
在与gulp-uglify插件和gulp-sourcemaps插件捆绑后发生 Uglify。 不幸的是，这不是最优化的，因为它不会删除无效的require语句。
创建单独的开发和分发版本 。 然后，您可以为您的开发版本生成源代码地图，而无需使用uglification。 你的发布版本可能会被忽略，没有源地图。