Gulp 3 - Делает файлы js в 3 раза больше, чем обычные файлы

#javascript #npm #gulp

Вопрос:

Из-за проблемы с сокращениями файлов gulp и js, gulp увеличивает размер файлов в 3 раза.

Например lightgallery.min.js — 49 кб (загружено с GitHub) затем я загружаю тот же файл через npm и требуется в файле js (то же самое, если я вставляю содержимое загруженного файла с github)

 global.lightgallery = require('lightgallery');

и запустите gulp, он увеличит размер файла в 133 кб

ЗАДАЧА GULP

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

Не использует никаких исходных текстов.

Может быть, у кого-то была такая же проблема?

1. Я вижу, вы не передаете никаких параметров uglify . Файлы можно сделать еще легче после обработки uglify путем передачи параметров — полный список здесь

2. Объединяет ли он несколько js-файлов, какова ценность SOURCEPATHS.jsSource ?

3. Это не объединение нескольких файлов js в один var SOURCEPATHS = { sassSource: ‘src / scss /** /*.scss’, jsSource: ‘src/ js / *.js’, imgSource: ‘src / img / **’} @lofihelsinki

Ответ №1:

Пакет lightgallery имеет зависимость от jQuery, как указано в описании npm и в его package.json. Когда Browserify делает свое дело, он проверяет график зависимостей пакета и извлекает все. Уменьшенный размер jQuery v3.3.1 составляет около ~ 85 КБ, что должно объяснить несоответствие.

В случае, если у вас уже есть jQuery где-то еще, вы обычно можете заставить Browserify игнорировать этот конкретный пакет. Например, используя gulp-browserify пакет:

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

Обновить

Вы можете выборочно применять это к файлам с помощью плагина gulp-if:

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

1. Спасибо, это работает, но теперь мой jquery не был вставлен, он игнорирует мой jquery.js файл. Возможно ли не игнорировать один файл?

2. Для подтверждения: у вас есть jquery.js файл в вашем приложении (который не загружается через npm), и Browserify игнорирует его только при добавлении { ignore: 'jquery' } опции?

3. У меня есть jquery, необходимый в jquery.js файл извлечен из npm, но теперь он игнорируется. Возможно ли разрешить throw jquery.js файл из-за игнорирования?

4. интересно, что давайте создадим обычный файл jquery со всем содержимым, но он не работает, консоль выдает ошибку TypeError: jQuery.fn is undefined , и другие файлы js не работают TypeError: $ is not a function

5. Удалил мой предыдущий комментарий об использовании .pipe(browserify({ ignore: ['jquery'] })).on('prebundle', function(bundle) {bundle.require('jquery');}) , поскольку я не думал, что это сделает именно то, что вы хотели. Я предполагаю, что он вывел связанный файл jQuery с пустым модулем в нем. Я добавил обновление к своему ответу, которое включает дополнительный плагин gulp-if , но должно достичь того, что вы хотите сделать, применив к одному файлу конфигурацию, отличную от других.