Gulp 3 - 使 js 文件比普通文件大 3 倍答案

【问题标题】：Gulp 3 - Makes js files 3 times bigger then normal filesGulp 3 - 使 js 文件比普通文件大 3 倍
【发布时间】：2019-03-23 19:26:27
【问题描述】：

gulp 和 js 文件缩小有问题，gulp 使文件大 3 倍。

例如 lightgallery.min.js - 49kb（从 GitHub 下载）然后我通过 npm 下载相同的文件并在 js 文件中需要（如果我从 github 插入下载的文件内容，则相同）

global.lightgallery = require('lightgallery');

并运行 gulp 它会生成文件 133kb

吞咽任务

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

不使用任何源地图。

也许有人遇到了同样的问题？

【问题讨论】：

我看到您没有将任何选项传递给uglify。通过传递选项，uglify 处理后的文件可以变得更轻 - 完整列表here
是否合并多个js文件，SOURCEPATHS.jsSource的值是多少？
不是将多个 js 文件合并为一个 var SOURCEPATHS = { sassSource : 'src/scss/**/*.scss', jsSource: 'src/js/*.js', imgSource : ' src/img/**'} @lofihelsinki

标签： javascript npm gulp

【解决方案1】：

lightgallery 包具有 jQuery 的依赖项，指定为 on the npm description 和 its package.json。当 Browserify 执行它的操作时，它会检查包的依赖关系图并将所有内容拉入。缩小的 jQuery v3.3.1 大约在 ~85kb 左右，这应该解释了差异。

如果你在其他地方已经有 jQuery，你通常可以让 Browserify 忽略那个特定的包。例如，使用gulp-browserify 包：

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

更新

您可以使用gulp-if 插件选择性地将其应用于文件：

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

【讨论】：

谢谢，它正在工作，但现在我的 jquery 没有插入它忽略我的 jquery.js 文件。是否可以不忽略一个文件？
确认：您的应用程序中有一个jquery.js 文件（不是通过npm 拉入的）并且Browserify 仅在您添加{ ignore: 'jquery' } 选项时才忽略它？
我在从 npm 提取的 jquery.js 文件中需要 jquery，但现在它被忽略了。是否可以让 throw jquery.js 文件不被忽略？
有趣的是让抛出并生成包含所有内容的普通 jquery 文件，但它不起作用控制台抛出错误 TypeError: jQuery.fn is undefined 和其他 js 文件不起作用 TypeError: $ is not a function
删除了我之前关于使用 .pipe(browserify({ ignore: ['jquery'] })).on('prebundle', function(bundle) {bundle.require('jquery');}) 的评论，因为我认为它不会完全符合您的要求。我假设它输出了一个包含空模块的捆绑 jQuery 文件。我在我的答案中添加了一个更新，其中涉及一个额外的插件gulp-if，但应该实现您在将不同的配置应用于一个文件而不是其他文件时想要做的事情。