Как добавить атрибут srcset в Gulp (ретина)?

Для добавления атрибута srcset, который используется для поддержки ретины в Gulp.js, вам следует использовать плагин gulp-responsive. Подразумевается, что вы уже установили Gulp.js и имеете файл gulpfile.js настроенный для вашего проекта.

Командой npm install -g gulp-responsive вы устанавливаете плагин gulp-responsive глобально в вашей системе.

Затем, в вашем gulpfile.js добавьте следующий код:

const gulp = require('gulp');
const responsive = require('gulp-responsive');

gulp.task('retina', function () {
  return gulp.src('src/images/*.jpg')
    .pipe(responsive({
      '*.jpg': [{
        width: '50%',
        rename: { suffix: '@2x' },
        quality: 70,
      }, {
        width: '25%',
        rename: { suffix: '@1x' },
        quality: 50,
      }],
    }))
    .pipe(gulp.dest('dist/images'));
});

gulp.task('default', gulp.series('retina'));

В этом примере, мы указываем плагину gulp-responsive, что нужно обрабатывать только файлы с расширением .jpg и создавать дополнительные переменные для каждого изображения с разным размером для ретины и обычного экрана. Параметр width определяет процент уменьшения размера изображения, а параметр rename указывает, как добавить суффикс к имени файла. В данном случае, наши ретиновые изображения будут называться [email protected], а обычные изображения - [email protected]. Также можно настроить параметры качества изображений.

После того, как вы настроили ваш gulpfile.js, вам нужно выполнить команду gulp в терминале, чтобы запустить задачу 'retina'. Плагин gulp-responsive обработает все изображения, найденные в папке 'src/images', и создаст соответствующие ретиновые и обычные изображения в папке 'dist/images'.

Теперь, вы можете использовать атрибут srcset в теге img в вашем HTML-коде для поддержки ретины. Атрибут srcset принимает значение как список изображений с разными размерами, разделенных запятыми, где каждая пара значений состоит из пути к изображению и ширины этого изображения.

Пример использования атрибута srcset в HTML-коде:

<img src="dist/images/[email protected]" srcset="dist/images/[email protected] 2x" alt="Example Image">

В этом примере, наша обычное изображение будет отображаться по умолчанию. Если устройство с поддержкой ретины загрузит страницу, то будет загружено изображение [email protected] из-за указанного значения 2x в атрибуте srcset.

Надеюсь, это поможет вам добавить атрибут srcset с поддержкой ретины в вашем проекте с использованием Gulp.js!