Gulp 3 - Makes js files 3 times bigger then normal files

Question

Having a problem with a gulp and js file minifications, gulp makes 3 times bigger files.

For example lightgallery.min.js - 49kb (downloaded from GitHub) then I download the same file via npm and required in js file (same if I insert downloaded file content from github)

global.lightgallery = require('lightgallery');

and run gulp it makes file 133kb

GULP TASK

gulp.task('scripts', function() {
    gulp.src( SOURCEPATHS.jsSource )
        .pipe( browserify() )
        .pipe( uglify() )
        .pipe( rename({ extname: '.min.js' }) )
        .pipe( gulp.dest(APPPATH.js) );
});

Not using any sourcemaps.

Maybe someone was having the same problem?

Answer 1

The package lightgallery has a dependency of jQuery as specified on the npm description and in its package.json. When Browserify does its thing, it checks the dependency graph of the package and pulls everything in. jQuery v3.3.1 minified is around ~85kb which should account for the discrepancy.

In case you already have jQuery somewhere else, you can usually get Browserify to ignore that particular package. For example, using the gulp-browserify package:

.pipe(browserify({ ignore: 'jquery' }))

Update

You can selectively apply this to files using the gulp-if plugin:

.pipe(
    gulpif(
        'jquery.js',
        browserify(),
        browserify({ ignore: ['jquery'] })
    )
)