如何获取 gulp+babel+browserify+uglify 的 sourcemaps

Question

我正在使用 gulp 将 browserify+babelify 与 uglifyjs 捆绑在一起。欧但是，从我的项目生成的 sourcemaps 只给我捆绑版本，而不是捆绑版本。

这是我的设置：

var gulp       = require('gulp'),
    source     = require('vinyl-source-stream'),
    browserify = require('browserify'),
    gutil      = require('gulp-util'),
    buffer     = require('vinyl-buffer'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify     = require('gulp-uglify'),
    file       = 'index.js';

gulp.task('build', function(){
    return browserify({
        entries: [file],
        transform: ["babelify"]
      })
    .bundle()
    .pipe(source(file))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public/js'))
    .pipe(gutil.noop())
})

有没有办法让我创建一个捆绑 babel=>browserify=>uglify 的构建，并且仍然 return 我映射到我的 pre-babel 文件？

我也不介意不使用 gulp（我实际上更喜欢 grunt，但这个设置过去对我有用）。

Answer 1

首先你需要通过将调试选项设置为 true 来设置 browserify 生成源映射，然后如果你想要 babelify 之前的源映射你需要配置 babelify 来生成源映射：

   var gulp       = require('gulp'),
    source     = require('vinyl-source-stream'),
    browserify = require('browserify'),
    gutil      = require('gulp-util'),
    buffer     = require('vinyl-buffer'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify     = require('gulp-uglify'),
    babelify   = require('babelify')
    file       = 'index.js';

gulp.task('build', function(){
    return browserify(file,{debug:true}).transform(babelify, {presets: ["es2015", "react"],sourceMaps:true})
    .bundle()
    .pipe(source(file))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./build/js'))
    .pipe(gutil.noop())
})

如何获取 gulp+babel+browserify+uglify 的 sourcemaps

How to get sourcemaps for gulp+babel+browserify+uglify

gulp

browserify

babeljs

uglifyjs