Skip to content

Instantly share code, notes, and snippets.

@stsvilik
Last active June 4, 2019 11:24
Show Gist options
  • Save stsvilik/46bf34f76910fcf515ea00650134190f to your computer and use it in GitHub Desktop.
Save stsvilik/46bf34f76910fcf515ea00650134190f to your computer and use it in GitHub Desktop.
Gulp browserify, babelify, uglify and concat vendor files
/*! 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"));
});
@stsvilik
Copy link
Author

stsvilik commented Aug 2, 2016

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.

@binarykitchen
Copy link

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

@mattlockyer
Copy link

Thanks this is great, worked like a charm!

@pnahtanoj
Copy link

pnahtanoj commented Aug 29, 2017

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))

@LittleLama
Copy link

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment