efremandre
@efremandre
Frontend Developer

Почему такое кривое форматирование в HTML после Gulp?

Только учусь, использую Gulp сборку, собирал по гайдам с YouTube. При сборке форматирование HTML в результирующем index.html съезжает и его трудно читать.

Подключаю HTML-модули в index.html с помощью "gulp-file-include": "^2.3.0" следующим образом:

<!DOCTYPE html>
<html lang="en">

@@include('html/head.html', {
'title': 'Home'
})

<body>
    <div class="wrapper">
        @@include('html/header.html')
        @@include('html/main.html')
        @@include('html/footer.html')
    </div>
    <script src="js/index.min.js"></script>
</body>

</html>

Сам модуль выглядит вот так:

<header class="header">
    <div class="container"></div>
</header>

В ответ получаю вот такую красоту:

<body>
    <div class="wrapper">
        <header class="header">
    <div class="container"></div>
</header>
        <main class="main">
    <div class="container"></div>
</main>
        <footer class="footer">
    <div class="container"></div>
</footer>
    </div>
    <script src="js/index.min.js"></script>
</body>

А именно проблемы с табуляцией у блоков. Помогите, пожалуйста, разобраться почему так происходит?
  • Вопрос задан
  • 141 просмотр
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега HTML
Да всё довольно просто - шаблонизатор просто сохраняет вашу собственную табуляцию.
Возьмём для примера header. В базовом файле у вас перед include идёт отступ в 8 пробелов - он сохраняется. Потом читается файл заголовка, в котором перед <header class="header"> отступа нет, а перед <div class="container"> отступ в виде 4 пробелов есть - он тоже сохраняется. Шаблонизатор просто не добавляет дополнительные отступы, которые были перед директивой @@include ко всем строкам подключаемого шаблона.
Используйте дополнительно какой-нибудь beautify-пакет, если хотите красоты.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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