Styjun

How do you cope with rejection?

Why is this python script running in background consuming 100 % CPU?

How does the +1 Keen Composite Longbow (+2 Str) work?

Existence of a model of ZFC in which the natural numbers are really the natural numbers

Department head said that group project may be rejected. How to mitigate?

What is this dime sized black bug with white on the segments near Loveland Colorodao?

How could the B-29 bomber back up under its own power?

Presenting 2 results for one variable using a left brace

Does science define life as "beginning at conception"?

Schwa-less Polysyllabic German Noun Stems of Germanic Origin

Separate the element after every 2nd ',' and push into next row in bash

1950s or earlier book with electrical currents living on Pluto

Is there a word for pant sleeves?

Hotel booking: Why is Agoda much cheaper than booking.com?

Why is there no current between two capacitors connected in series?

Why did Nick Fury not hesitate in blowing up the plane he thought was carrying a nuke?

Why "strap-on" boosters, and how do other people say it?

Germany rejected my entry to Schengen countries

What should I wear to go and sign an employment contract?

US F1 Visa grace period attending a conference

On a piano, are the effects of holding notes and the sustain pedal the same for a single chord?

Salesforce bug enabled "Modify All"

Is there a realtime, uncut video of Saturn V ignition through tower clear?

Was murdering a slave illegal in American slavery, and if so, what punishments were given for it?

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

How can I upload files asynchronously?How do I include a JavaScript file in another JavaScript file?How do I make the first letter of a string uppercase in JavaScript?What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?How to combine gulp-watch and gulp-inject?Gulp-sass won't compile scss files to css instead copy all files from scss folder to css folderAccessing home directory with `base` in GulpNPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. WebpackGulp: Generate sourcemaps for both minified and non-minified scriptsHave to run gulp more than once to get Style changes

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

6

3

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?

javascript npm gulp

share|improve this question

edited Mar 25 at 9:11

Kintamasis

asked Mar 23 at 19:26

KintamasisKintamasis

126217

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I see you're not passing any options to uglify. Files can be made even lighter after being processed by uglify by passing options - full list here
  
  – Nino Filiu
  Mar 25 at 19:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Does it combine multiple js-files, what is the value of SOURCEPATHS.jsSource?
  
  – lofihelsinki
  Mar 26 at 7:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's not combining multiple js files into one var SOURCEPATHS = sassSource : 'src/scss/**/*.scss', jsSource: 'src/js/*.js', imgSource : 'src/img/**' @lofihelsinki
  
  – Kintamasis
  Mar 26 at 10:33
  
  

  
  
  
  

add a comment | 

6

3

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?

javascript npm gulp

share|improve this question

edited Mar 25 at 9:11

Kintamasis

asked Mar 23 at 19:26

KintamasisKintamasis

126217

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I see you're not passing any options to uglify. Files can be made even lighter after being processed by uglify by passing options - full list here
  
  – Nino Filiu
  Mar 25 at 19:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Does it combine multiple js-files, what is the value of SOURCEPATHS.jsSource?
  
  – lofihelsinki
  Mar 26 at 7:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's not combining multiple js files into one var SOURCEPATHS = sassSource : 'src/scss/**/*.scss', jsSource: 'src/js/*.js', imgSource : 'src/img/**' @lofihelsinki
  
  – Kintamasis
  Mar 26 at 10:33
  
  

  
  
  
  

add a comment | 

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?

javascript npm gulp

share|improve this question

edited Mar 25 at 9:11

Kintamasis

asked Mar 23 at 19:26

KintamasisKintamasis

126217

global.lightgallery = require('lightgallery');

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

share|improve this question

edited Mar 25 at 9:11

Kintamasis

asked Mar 23 at 19:26

KintamasisKintamasis

126217

share|improve this question

edited Mar 25 at 9:11

Kintamasis

asked Mar 23 at 19:26

KintamasisKintamasis

126217

asked Mar 23 at 19:26

KintamasisKintamasis

126217

asked Mar 23 at 19:26

KintamasisKintamasis

126217

1 Answer
1

active

oldest

votes

4

+50

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'] )
 )
)

share|improve this answer

edited Apr 5 at 6:32

answered Apr 1 at 3:08

ZweihänderZweihänder

41329

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, it's working, but now my jquery was not inserted its ignore my jquery.js file. Is it possible to not ignore one file?
  
  – Kintamasis
  Apr 1 at 6:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To confirm: you have a jquery.js file in your application (that isn't pulled in via npm) and Browserify is ignoring it only when you add in the ignore: 'jquery' option?
  
  – Zweihänder
  Apr 5 at 4:48
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have jquery required in jquery.js file pulled from npm, but now it's ignoring. Is it possible to let throw jquery.js file from ignoring?
  
  – Kintamasis
  Apr 5 at 5:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  interesting is let throw and generate normal jquery file with all content, but it's not working console throws error TypeError: jQuery.fn is undefined and other js files don't work TypeError: $ is not a function
  
  – Kintamasis
  Apr 5 at 6:01
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Deleted my previous comment of using .pipe(browserify( ignore: ['jquery'] )).on('prebundle', function(bundle) bundle.require('jquery');) as I didn't think it would do exactly what you wanted. I'm assuming that it outputted a bundled jQuery file with an empty module in it. I've added in an update to my answer which involves an extra plugin gulp-if but should achieve what you're looking to do in applying a different config to one file than to the others.
  
  – Zweihänder
  Apr 5 at 6:35
  

  
  
  
  

 | 
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55317535%2fgulp-3-makes-js-files-3-times-bigger-then-normal-files%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

4

+50

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'] )
 )
)

share|improve this answer

edited Apr 5 at 6:32

answered Apr 1 at 3:08

ZweihänderZweihänder

41329

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, it's working, but now my jquery was not inserted its ignore my jquery.js file. Is it possible to not ignore one file?
  
  – Kintamasis
  Apr 1 at 6:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To confirm: you have a jquery.js file in your application (that isn't pulled in via npm) and Browserify is ignoring it only when you add in the ignore: 'jquery' option?
  
  – Zweihänder
  Apr 5 at 4:48
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have jquery required in jquery.js file pulled from npm, but now it's ignoring. Is it possible to let throw jquery.js file from ignoring?
  
  – Kintamasis
  Apr 5 at 5:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  interesting is let throw and generate normal jquery file with all content, but it's not working console throws error TypeError: jQuery.fn is undefined and other js files don't work TypeError: $ is not a function
  
  – Kintamasis
  Apr 5 at 6:01
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Deleted my previous comment of using .pipe(browserify( ignore: ['jquery'] )).on('prebundle', function(bundle) bundle.require('jquery');) as I didn't think it would do exactly what you wanted. I'm assuming that it outputted a bundled jQuery file with an empty module in it. I've added in an update to my answer which involves an extra plugin gulp-if but should achieve what you're looking to do in applying a different config to one file than to the others.
  
  – Zweihänder
  Apr 5 at 6:35
  

  
  
  
  

 | 
show 1 more comment

4

+50

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'] )
 )
)

share|improve this answer

edited Apr 5 at 6:32

answered Apr 1 at 3:08

ZweihänderZweihänder

41329

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks, it's working, but now my jquery was not inserted its ignore my jquery.js file. Is it possible to not ignore one file?
  
  – Kintamasis
  Apr 1 at 6:38
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To confirm: you have a jquery.js file in your application (that isn't pulled in via npm) and Browserify is ignoring it only when you add in the ignore: 'jquery' option?
  
  – Zweihänder
  Apr 5 at 4:48
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have jquery required in jquery.js file pulled from npm, but now it's ignoring. Is it possible to let throw jquery.js file from ignoring?
  
  – Kintamasis
  Apr 5 at 5:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  interesting is let throw and generate normal jquery file with all content, but it's not working console throws error TypeError: jQuery.fn is undefined and other js files don't work TypeError: $ is not a function
  
  – Kintamasis
  Apr 5 at 6:01
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Deleted my previous comment of using .pipe(browserify( ignore: ['jquery'] )).on('prebundle', function(bundle) bundle.require('jquery');) as I didn't think it would do exactly what you wanted. I'm assuming that it outputted a bundled jQuery file with an empty module in it. I've added in an update to my answer which involves an extra plugin gulp-if but should achieve what you're looking to do in applying a different config to one file than to the others.
  
  – Zweihänder
  Apr 5 at 6:35
  

  
  
  
  

 | 
show 1 more comment

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'] )
 )
)

share|improve this answer

edited Apr 5 at 6:32

answered Apr 1 at 3:08

ZweihänderZweihänder

41329

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

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

share|improve this answer

edited Apr 5 at 6:32

answered Apr 1 at 3:08

ZweihänderZweihänder

41329

answered Apr 1 at 3:08

ZweihänderZweihänder

41329

answered Apr 1 at 3:08

ZweihänderZweihänder

41329