Как gulp-webp-html отключить для класса?

Для того чтобы отключить использование gulp-webp-html для определенного класса или элемента в HTML, вам потребуется использовать комментарии в коде и настройки в конфигурационном файле Gulp.

Шаг 1: Добавьте комментарий в HTML коде
Добавьте комментарий внутри соответствующего элемента класса, который должен быть исключен из конвертации в формат WebP. Пример:

<div class="no-convert">
    <!-- Gulp WebP should not convert this element -->
    <img src="image.jpg" alt="Image">
</div>

Шаг 2: Настройте конфигурационный файл Gulp
В конфигурационном файле Gulp (обычно gulpfile.js или gulpfile.babel.js) найдите задачу, которая отвечает за конвертацию изображений в формат WebP. Обычно это задача, которая содержит плагин gulp-webp-html.

const gulp = require('gulp');
const webphtml = require('gulp-webp-html');

gulp.task('convertWebP', function() {
    return gulp.src('src/*.html')
        .pipe(webphtml())
        .pipe(gulp.dest('dist'));
});

Шаг 3: Измените конфигурацию задачи
Добавьте проверку комментариев в задаче конвертации изображений в WebP. Если найден комментарий внутри элемента с классом no-convert, то пропустите его.

gulp.task('convertWebP', function() {
    return gulp.src('src/*.html')
        .pipe(webphtml({
            skip: (req, res) => {
                const classList = res.classList || '';
                if (classList.contains('no-convert')) {
                    return true;
                }
                return false;
            }
        }))
        .pipe(gulp.dest('dist'));
});

В данном примере выполняется проверка наличия класса "no-convert" для текущего элемента, и если такой класс присутствует, то настройка skip позволяет пропустить текущий элемент, чтобы он не был конвертирован в формат WebP.

После внесения изменений в конфигурацию сохраните файл gulpfile.js и запустите задачу для конвертации изображений в формат WebP с помощью команды gulp convertWebP. Теперь элементы с классом "no-convert" не будут конвертироваться.