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']); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Very very nice split-up! Thanks for the inspiration.