Gulp 5, битые изображения при копировании и ошибки шрифтов. Как исправить?

Опубликовано автором

При копировании изображений в Gulp 5 на выходе они получаются битыми. Рассмотрим простое решение, без необходимости откатываться на 4 версию.

Проблема

Когда мы копируем изображения с исходников (папка src), в папку проекта ( build ), то на выходе получаются битые изображения.

Например так:

export const images = () => {
  return gulp.src(./src/images/**/*.*')
    //ваши настройки
    .pipe(gulp.dest(./build/images/))
}

Тоесть обычное копирование 🙂
При это мы получаем непонятный бинарный файл с аналогичным названием, но уже далеко не картинку 🙁

Эта проблема с Gulp 5.0 если понизить до 4 будет все работать.

Решение

В Gulp 5.0 нужно применить опцию {encoding: false} непосредственно к вызову функции  src().
Это сообщает Gulp не конвертировать данные в текстовую кодировку.
Например :

export const images = () => {
  return gulp.src(./src/images/**/*.*',{encoding: false})
    //ваши настройки
    .pipe(gulp.dest(./build/images/))
}

На 5.0 проблема в том что по умолчанию .dest в gulp обрабатывает файлы как текстовые и в кодировке utf-8 поэтому в тасках на конвертирование шрифтов, оптимизацию картинок нужно писать src('./src/fonts/**/*.ttf',{encoding:false}) чтобы получаемые файлы были в буфере в двоичном виде.

Просмотры: 150