Gulp verklein meerdere js-bestanden tot één

Ik ben nieuw bij Gulp en vraag me af hoe ik mijn verzameling kan verkleinen (samenvoegen) tot één bestand in plaats van elk bestand afzonderlijk.

Voorbeeld

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

Zoals je kunt zien, probeer ik 3 javascript-bestanden te verkleinen en ze vervolgens uit te voeren in één client.min.js. Is het mogelijk?

Antwoord 1, autoriteit 100%

Deze plug-in helpt gulp-concat.

Gebruik:

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

Antwoord 2, autoriteit 11%

In plaats van een heleboel lastige dingen te doorlopen, raad ik je aan om laravel-elixirte gebruiken. Het compileert sass, less, babel, coffescript en voegt zelfs iets toe dat je wilt, niet alleen met JavaScript, maar ook met css. Alle code die u nodig heeft, is:

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

Antwoord 3, autoriteit 3%

Laten we gulp-concat-utilproberen om lid te worden van scripts. Het is vergelijkbaar met concat, maar heeft enkele helpers om bestanden te lijmen. Er is een speciale helper om scripts samen te voegen.

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