Gulp将多个js文件缩小为一个

Posted 2021-04-20

我是Gulp的新手，想知道如何将我的集合缩小（连接）到单个文件而不是单独的每个文件。

Example

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中。可能吗？

答案

这个插件将帮助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/'))
});

另一答案

我建议你得到laravel-elixir而不是经历许多棘手的事情。它正在编译sass，less，babel，coffescript甚至添加你想要的东西，不仅包括JavaScript，还包括css。您需要的所有代码将是：

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')
});

另一答案

让我们尝试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/'))
});