Gulp минимизировать несколько js файлов на один

Я новичок в 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. Возможно ли это?

Ответы

Ответ 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/'))
});

Ответ 2

Вместо того, чтобы проходить через множество сложных вещей, я рекомендую вам получить 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')
});

Ответ 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/'))
});