Skip to content

Instantly share code, notes, and snippets.

@nateajohnson
Last active June 25, 2019 18:09
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save nateajohnson/4d16df279d2e3d2b6b16 to your computer and use it in GitHub Desktop.
Save nateajohnson/4d16df279d2e3d2b6b16 to your computer and use it in GitHub Desktop.
Gulpfile.js example that splits vendor and app bundles
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var rename = require('gulp-rename');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var gzip = require('gulp-gzip');
var concat = require('gulp-concat');
var bowerResolve = require('bower-resolve');
var nodeResolve = require('resolve');
gulp.task('default', ['build-vendor', 'build-app']);
gulp.task('build-vendor', function() {
var b = browserify({ debug: false });
// For Bower - https://github.com/sogko/gulp-recipes/blob/master/browserify-separating-app-and-vendor-bundles/gulpfile.js
//b.require(bowerResolve.fastReadSync(id), { expose: id });
b.require(nodeResolve.sync('jquery'), { expose: 'jquery' });
b.require(nodeResolve.sync('moment'), { expose: 'moment' });
b.require(nodeResolve.sync('react'), { expose: 'react' });
b.require(nodeResolve.sync('react/addons'), { expose: 'react/addons' });
b.require(nodeResolve.sync('react-onclickoutside'), { expose: 'react-onclickoutside' });
b.require(nodeResolve.sync('reflux'), { expose: 'reflux' });
b.require(nodeResolve.sync('react-datepicker'), { expose: 'react-datepicker' });
var stream = b.bundle()
.pipe(source('vendor.js'))
.pipe(gulp.dest('./public/assets/js'))
.pipe(buffer())
.pipe(uglify())
.pipe(rename('vendor.min.js'))
.pipe(gulp.dest('./public/assets/js'));
return stream;
});
gulp.task('build-app', function() {
var b = browserify('./public/assets/js/app.js', { debug: false });
b.external('jquery');
b.external('moment');
b.external('react');
b.external('react/addons');
b.external('react-onclickoutside');
b.external('reflux');
b.external('react-datepicker');
var stream = b.transform(babelify, { stage: 0 })
.bundle()
.on('error', function(e){
console.log(e.message);
this.emit('end');
})
.pipe(source('bundle.js'))
.pipe(gulp.dest('./public/assets/js'))
.pipe(buffer())
.pipe(uglify())
.pipe(rename('bundle.min.js'))
.pipe(gulp.dest('./public/assets/js'));
//.pipe(gzip())
//.pipe(gulp.dest('./public/assets/js'));
return stream;
});
gulp.task('watch', function() {
gulp.watch('public/assets/js/**/*.js', ['build-app']);
});
@Twinski
Copy link

Twinski commented Apr 18, 2015

Very very nice split-up! Thanks for the inspiration.

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