Gulp 4: Сквозные исходные потоки

Обычно gulp.src создаёт поток файловых объектов на основе предоставленного вами шаблона подстановки. Это сделало обязательным размещение gulp.src в начале вашего потока. Теперь он может быть размещён в любом месте вашего конвейера, пропуская предыдущие шаги.

Это позволяет создавать довольно интересные сценарии. Самым полезным из них объединение потоков. Как вы можете увидеть на приведённом далее примере, мы хотим проверить линтером свои JavaScript файлы и объединить их с файлами поставщиков в один файл.

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

gulp.task('default', function() {
  return gulp.src('src/**/*.js') /** 1 **/
    .pipe(jshint()) /** 2 **/
    .pipe(jshint.reporter('default'))
    .pipe(jshint.reporter('fail'))
    .pipe(gulp.src('vendor/**/*.js', {passthrough: true})) /** 3 **/
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest('dest'));
});

Пояснение процесса:

• Мы собираем наши исходные JavaScript файлы.
• Это файлы, которые мы разработали, а значит мы хотим, что бы они соответствовали нашим соглашениям о кодировании.
• После выполнения JSHint, мы получаем все файлы поставщиков. К ним относятся такие пакеты файлов, как jQuery, lodash и прочие. При использовании флага passthrough, все файловые объекты пропускают предыдущие этапы конвейера потока и добавляются к общему потоку.

Мы так же можем использовать эту возможность, когда хотим объединить вывод препроцессора sass с обычными исходными css файлами.

gulp.task('styles', function(){
  return gulp.src('styles/main.scss')
    .pipe(sass())
    .pipe(gulp.src('styles/**/*.css'), {passthrough: true})
    .pipe(concat('main.css'))
    .pipe(gulp.dest('dist'));
});

То же самое с CoffeeScript, если вам понравилась идея:

gulp.task('scripts', function(){
  return gulp.src('scripts/*.coffee')
    .pipe(coffee())
    .pipe(gulp.src('scripts/*.js'), {passthrough: true})
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

Хотя это не решает все задачи, в которых может пригодиться использование слияния. Объединение различных источников в средине потока это определённо желанное дополнение.