I'm working on a project that uses the following tools:
I'm able to generate the distribution file and it works correctly. The generated source map is not correct though. When I load it in Chrome, Chrome not able to map the distribution file to the source files. My problem is similar (but not the same) to this one. Unfortunately, this similar issue doesn't have an answer, thus it doesn't help me.
I've also tried to follow this recipe, but it doesn't fit my case.
This is the relevant code of my set up (gulpfile.js
):
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('build:dist', function() {
var browserifyInstance = browserify({
entries: 'src/module.js',
debug: true,
standalone: 'Module',
bundleExternal: false,
transform: [babelify]
});
return browserifyInstance
.bundle()
.pipe(source('module.js'))
.pipe(rename({
extname: '.min.js'
}))
.pipe(buffer())
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'));
});
How can I fix it?