使用Gulp将多个JS文件压缩成一个文件

Question

我是 Gulp 的新手，想知道如何将我的文件合并为一个文件而不是分别压缩（合并）每个文件。

示例

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('minify', function () {
   gulp.src([
        'content/plugins/jquery/jquery-2.1.1.js',
        'content/plugins/jquery/jquery-ui.js',
        'content/js/client.js'])
      .pipe(uglify())
      .pipe(gulp.dest('content/js/client.min.js')) // It will create folder client.min.js
});

gulp.task('default', ['minify']);

你可以看到我正在尝试压缩3个JavaScript文件，然后将它们输出为一个client.min.js。这是否可行？

- Stan

Answer 1

此插件将帮助gulp-concat。

使用方法：

var concat = require('gulp-concat');

gulp.task('scripts', function() {
  gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/'))
});

- user3995789

---

默认情况下，UglifyJS 执行 JavaScript 的代码压缩。 - George Pligoropoulos

这个方法也适用于合并和压缩CSS和HTML文件吗？ - CSS

@IamC.S.S. 是的，同样的方法应该适用，但是你需要使用 gulp-minify-css 而不是 uglify。 - tuomassalo

最好先进行代码混淆（所有文件将分别进行缩小），然后再进行合并。这样可以避免一些生成脚本中的问题。变体2-使用一些粘合剂进行合并变体3-使用Google闭包编译器来完成两个任务。 - SynCap

如果我在file1.js中从file3.js进行require，那么它不会起作用，对吗？（在file1.js中：require("./file3")） - peni4142

如果我将文件分组，如何使用Mocha访问每个文件的函数以进行单元测试。 - Vineesh TP

Answer 2

不必经历繁琐的事情，我建议你使用 laravel-elixir。它可以通过不仅仅是JavaScript，还有css将sass、less、babel、coffescript编译，并添加任何你想要的内容。你所需的所有代码将是：

var gulp = require('gulp');
var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.scripts(['app.js', 'controllers.js', 'sweetalert.js'], 'public/js/all.js');
    mix.styles(['normalize.css', 'app.css', 'sweetalert.css'], 'public/css/all.css')
});

- Aditya Giri

---

对于刚开始使用gulp的人来说，过度使用可能会有些不必要。 - mkvlrn

为什么要过度设计？这只是在您的本地电脑上完成一次性工作。您不必担心客户端性能。 - Cas Bloem

Elexir只存在于Laravel的媒体中！对于大多数任务，它需要精确的基础设施。 - SynCap

关于代码压缩的性能问题，与Gulp相比，Minifing的表现如何？ - sarkiroka

Answer 3

让我们尝试使用gulp-concat-util来合并脚本。它类似于concat，但具有一些帮助程序来粘合文件。有一个特殊的帮助程序来连接脚本。

var concat = require('gulp-concat-util');

gulp.task('scripts', function() {
  gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
    .pipe(concat.scripts('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/'))
});

- SynCap