Compress vendor JS libraries

I'm trying to get a single vendor.min.js to reduce the number of external files to be loaded and to do so, I have the following gulp task:

gulp.task('vendor-bundle', function() {
gulp.src([
'core-js/client/shim.min.js',
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'reflect-metadata/Reflect.js',
'rxjs/**/*.js',
'zone.js/dist/zone.js',
'@angular/**/bundles/*.umd.js',
'@ng-bootstrap/**/bundles/ng-bootstrap.js',
'jquery/dist/jquery.min.js',
'bootstrap/dist/js/*.js',
'tether/dist/**/tether.min.js',
],{cwd: "node_modules/**"})
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});


When I try to run my Angular 2 application I get the following error:

Uncaught SyntaxError: Identifier 'window' has already been declared
at vendors.min.js:1
(anonymous) @ vendors.min.js:1
app.js:1 Uncaught ReferenceError: define is not defined
at app.js:1
(anonymous) @ app.js:1


I'm assuming that's because everything grouped together into a single file could cause definition conflicts?

I get another error in my app.js and I think that's because the vendors.min.js failed to load because of the error I'm getting.

Is there a way to remove duplicate definitions or a better way to concatenate the vendor files into a single one to reduce the resources to be fetched?

Continue reading...