Gulp browserify, babelify, uglify and concat vendor files

gulpfile.js

/*! gulpfile.js */

const gulp = require("gulp");
const gutil = require("gulp-util");
const browserify = require("browserify");
const buffer = require("vinyl-buffer");
const uglify = require("gulp-uglify");
const sourcemaps = require("gulp-sourcemaps");
const source = require("vinyl-source-stream");
const concat = require("gulp-concat")

gulp.task("browserify", function() {
    const b = browserify({
        entries: "./src/app.js",
        debug: true,
    });

    return b
    .transform("babelify", {presets: ["es2015"]})
    .bundle()
    .pipe(source("app.js"))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .on("error", gutil.log)
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest("./dist/"));
});

gulp.task("bundle", ["browserify"], function() {
    return gulp.src([
        "vendor/jquery-3.1.0.min.js",
        "dist/app.js"
    ])
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(concat("app.js"))
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest("dist"));
});

This would help anyone who suffered countless hours (just like I) to get sourceMaps working right when you babelify your ES6 app and also add vendor files to the bundle.

babelify hasn't been maintained for more than one year :/

Thanks this is great, worked like a charm!

My setup is basically the same,but I'm seeing an error with the uglify(): SyntaxError: Unexpected token: keyword (const)

Should es2015 be replacing all of the consts?

browserify({
entries: paths.clientModuleFile,
debug: true
})
.transform("babelify", {presets: ["es2015"]})
.bundle()
.pipe(source(paths.clientModuleName))
.pipe(buffer())
.pipe(uglify().on('error', gutil.log))
.pipe(gulp.dest(paths.clientDistDir))

Since gulp upgraded to version 4 you can't no more write :

gulp.task("bundle", ["browserify"], function() {
    return gulp.src([
        "vendor/jquery-3.1.0.min.js",
        "dist/app.js"
    ])
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(concat("app.js"))
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest("dist"));
});

You must correct this by

gulp.task("bundle", gulp.series("browserify", function() {
    return gulp.src([
        "vendor/jquery-3.1.0.min.js",
        "dist/app.js"
    ])
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(concat("app.js"))
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest("dist"));
}));

Source : https://www.liquidlight.co.uk/blog/how-do-i-update-to-gulp-4/