michael_mashush
@michael_mashush

Как настроить gulp-htmlmin, чтобы не изменял значения атрибутов?

source/index.html:
<div class="intro__image image image--cover">
                <picture>
                    <!-- * webp -->
                    <source srcset="./assets/images/banners/home/banner_100x.webp 1x, ./assets/images/banners/home/banner_200x.webp 2x" type="image/webp" media="(min-width: 1241px)" />
                    <source srcset="./assets/images/banners/home/banner_75x.webp 1x, ./assets/images/banners/home/banner_150x.webp 2x"  type="image/webp" media="(min-width: 426px)" />
                    <source srcset="./assets/images/banners/home/banner_50x.webp 1x, ./assets/images/banners/home/banner_100x.webp 2x"  type="image/webp" media="(min-width: 0px)" />
                    <!-- * jpeg -->
                    <source srcset="./assets/images/banners/home/banner_100x.jpg 1x, ./assets/images/banners/home/banner_200x.jpg 2x" type="image/jpeg" media="(min-width: 1241px)" />
                    <source srcset="./assets/images/banners/home/banner_75x.jpg 1x, ./assets/images/banners/home/banner_150x.jpg 2x"  type="image/jpeg" media="(min-width: 426px)" />
                    <source srcset="./assets/images/banners/home/banner_50x.jpg 1x, ./assets/images/banners/home/banner_100x.jpg 2x"  type="image/jpeg" media="(min-width: 0px)" />
                    <img src="./assets/images/banners/home/banner_100x.jpg" alt="home-banner" />
                </picture>
            </div>

build/index.html:
<div class="intro__image image image--cover">
                                <picture>
                                    <!-- * webp -->
                                    <source srcset="./assets/images/banners/home/banner_100x.webp, ./assets/images/banners/home/banner_200x.webp 2x" type="image/webp" media="(min-width: 1241px)"/>
                                    <source srcset="./assets/images/banners/home/banner_75x.webp, ./assets/images/banners/home/banner_150x.webp 2x" type="image/webp" media="(min-width: 426px)"/>
                                    <source srcset="./assets/images/banners/home/banner_50x.webp, ./assets/images/banners/home/banner_100x.webp 2x" type="image/webp" media="(min-width: 0px)"/>
                                    <!-- * jpeg -->
                                    <source srcset="./assets/images/banners/home/banner_100x.jpg, ./assets/images/banners/home/banner_200x.jpg 2x" type="image/jpeg" media="(min-width: 1241px)"/>
                                    <source srcset="./assets/images/banners/home/banner_75x.jpg, ./assets/images/banners/home/banner_150x.jpg 2x" type="image/jpeg" media="(min-width: 426px)"/>
                                    <source srcset="./assets/images/banners/home/banner_50x.jpg, ./assets/images/banners/home/banner_100x.jpg 2x" type="image/jpeg" media="(min-width: 0px)"/>
                                    <img src="./assets/images/banners/home/banner_100x.jpg" alt="home-banner"/>
                                </picture>
                            </div>

HTML task:
.pipe(fileInclude({
            indent: true,
        }))
.pipe(gulpIf(
            IS_PROD_MODE, 
            htmlMin({
                collapseWhitespace: true,
                removeComments: true,
                keepClosingSlash: true
            }),
            htmlMin({
                collapseWhitespace: false,
                removeComments: false,
                keepClosingSlash: true,
            }),
        ))


В данном случае gulp-htmlmin игнорирует значения 1xв атрибуте srcset, из-за чего в последствии даже на обычный дисплей подгружается изображение. Как это предотвратить?
  • Вопрос задан
  • 58 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы