Почему не работает gulp-webp-html?

Question

[Андрей Зырянов]

По каким-то причинам плагин gulp-webp-html не хочет работать.

Есть html-код:

<section class="map">
  <h2 class="visually-hidden">Схема проезда</h2>
  <figure class="map__wrapper">
    <div class="map__interactive" id="map-interactive">
      <p>Нажмите, чтобы включить интерактивную карту</p>
    </div>
    <picture>
      <source media="(min-width: 960px)" srcset="img/map.png">
      <source media="(min-width: 660px)" srcset="img/map-tablet.png">
      <img src="img/map-mobile.png" alt="Схема проезда в наш офис" class="map__image">
    </picture>
  </figure>
</section>

Подключаю плагин и добавляю его в таск:

const webpHTML = require("gulp-webp-html");

function html() {
    return src(path.src.html)
        .pipe(fileInclude())
        .pipe(webpHTML())
        .pipe(dest(path.build.html))
        .pipe(server.stream());
}

exports.html = html;

На выходе получается тот же самый код, без webp. Подскажите, что делаю не так?

Answer 1

[NFI]

В доке изначально подключают просто картинку просто тегом img. А галп ее сам оборачивает в picture. Ну это судя по доке https://www.npmjs.com/package/gulp-webp-html. Я бы еще подключил gulp-webp, чтобы картинки преобразовывать в нужный формат

Comments

[Андрей Зырянов]

Ага, попробовал на img, работает. Видимо с picture плагин просто не дружит :(
Gulp-webp имею удовольствие использовать.

Решение проблемы нашел в отказе от gulp-webp-html и использовании шаблонизатора gulp-file-include.