在 gulp 中连接和丑化 js 的最佳方法

Question

我正在尝试在 gulp 中自动连接和丑化 js。

这是我的 gulpfile.js：

gulp.task('compressjs', function() {
    gulp.src(['public/app/**/*.js','!public/app/**/*.min.js'])
    .pipe(sourcemaps.init())
    .pipe(wrap('(function(){"use strict"; <%= contents %>\n})();'))
    .pipe(uglify())
    .pipe(concat('all.js'))
    .pipe(rename({
        extname: '.min.js'
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/app'));
})

您是否认为需要用(function(){"use strict"; <%= contents %>\n})(); 包装每个文件以避免在每个文件连接在一起时发生冲突？你认为我的 gulp 任务是好的，还是可以更好地执行它的任务？

Answer 1

对于大多数代码来说，实际上没有必要将每个文件都包装在一个闭包中。有一些糟糕的库会泄漏变量，但我建议您根据具体情况处理它们，如果可能，发出拉取请求以解决问题或停止使用它们。通常，它们不能像将它们包装在一个函数中那样简单地修复。

您上面的任务不会正确地将所有文件传递给 uglify 任务 - 您需要先连接。您也不需要重命名，因为您可以在连接中指定全名。 下面是一个经过良好测试的 Gulp 设置，可以完全按照您的要求进行操作：

gulp.task('javascript:vendor', function(callback) {
  return gulp.src([
      './node_modules/jquery/dist/jquery.js',
      './node_modules/underscore/underscore.js',
      './node_modules/backbone/backbone.js'
    ])
    .pipe(sourcemaps.init())
    // getBundleName creates a cache busting name
    .pipe(concat(getBundleName('vendor')))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public/app'))
    .on('error', handleErrors);
});