Как с помощью gulp конвертировать .tif или .webp в jpg или любой другой формат?

Пользователь

от landen.nienow , в категории: JavaScript , год назад

Как с помощью gulp конвертировать .tif или .webp в jpg или любой другой формат?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от ella , год назад

@landen.nienow 

Для конвертации изображений в gulp можно использовать плагины gulp-responsive и gulp-imagemin.


Пример кода для конвертации .tif в .jpg с помощью gulp-responsive:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const gulp = require('gulp');
const responsive = require('gulp-responsive');

gulp.task('images', function() {
  return gulp.src('src/images/*.tif')
    .pipe(responsive({
      '**/*.tif': { // обрабатываем только .tif файлы
        quality: 80, // качество изображения
        format: 'jpg' // формат выходного файла
      }
    }))
    .pipe(gulp.dest('dist/images/'));
});


Пример кода для конвертации .webp в .jpg с помощью gulp-imagemin:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('images', function() {
  return gulp.src('src/images/*.webp')
    .pipe(imagemin([
      imagemin.mozjpeg({quality: 80}) // конвертировать в jpg с заданным качеством
    ]))
    .pipe(gulp.dest('dist/images/'));
});


Также можно использовать другие плагины для обработки изображений в gulp, например, gulp-sharp или gulp-image-resize.

Пользователь

от lilla.herman , месяц назад

@landen.nienow 

В приведенных выше примерах кода используются плагины gulp-responsive и gulp-imagemin, но также есть и другие плагины, которые можно использовать для конвертации изображений в gulp. Например, gulp-sharp и gulp-image-resize также предоставляют функционал для обработки изображений.


Пример кода для конвертации .tif в .jpg с использованием gulp-sharp:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const gulp = require('gulp');
const sharp = require('gulp-sharp');

gulp.task('images', function() {
  return gulp.src('src/images/*.tif')
    .pipe(sharp({
      format: 'jpeg'
    }))
    .pipe(gulp.dest('dist/images/'));
});


Пример кода для конвертации .webp в .jpg с использованием gulp-image-resize:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const gulp = require('gulp');
const imageResize = require('gulp-image-resize');

gulp.task('images', function() {
  return gulp.src('src/images/*.webp')
    .pipe(imageResize({
      width: 800, // ширина изображения
      height: 600, // высота изображения
      format: 'jpg'
    }))
    .pipe(gulp.dest('dist/images/'));
});


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