gulp + babel + browserify + uglify - gulp、browserify、babeljs、uglifyjsのソースマップを取得する方法

私はbrowserify + babelifyをuglifyjsにバンドルするためにgulpを使用しています。 O しかし、私のプロジェクトから生成されたソースマップは、バンドルされたバージョンではなく、バンドルされたバージョンのみを提供します。

ここに私のセットアップです：

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をバンドルしたビルドを作成し、私の前のbabelファイルにマップを返す方法はありますか？

私はまた、ギャルプを使用しないで気にしません（私は実際にはむちゃくちゃが好きですが、この設定は過去に私のために働いていました）。

回答：

まず、browserifyをに設定する必要がありますデバッグ・オプションをtrueに設定してソース・マップを生成します。事前に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())
})