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"));
});
@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