Запилил бьютификатор разметки

config.js

@@ -18,7 +18,6 @@ let config =
     "main-nav",
     "burger",
     "page-footer",
-    "some-new-class",
     "sprite-svg",
     "sprite-png"
   ],

gulpfile.js

@@ -12,7 +12,6 @@ const replace = require('gulp-replace');
 const getClassesFromHtml = require('get-classes-from-html');
 const jsonFormat = require('json-format');
 const browserSync = require('browser-sync').create();
-const htmlbeautify = require('gulp-html-beautify');
 const debug = require('gulp-debug');
 const sass = require('gulp-sass');
 const notify = require('gulp-notify');
@@ -34,6 +33,7 @@ const svgmin = require('gulp-svgmin');
 const spritesmith = require('gulp.spritesmith');
 const merge = require('merge-stream');
 const imagemin = require('gulp-imagemin');
+const prettyHtml = require('gulp-pretty-html');
 
 // Настройки из файла
 let config = require('./config.js');
@@ -55,6 +55,13 @@ let pugOption = {
   data: { repoUrl: repoUrl, },
   filters: { 'show-code': filterShowCode, },
 };
+// Настройки бьютификатора
+let prettyOption = {
+  indent_size: 2,
+  indent_char: ' ',
+  unformatted: ['code', 'em', 'strong', 'span', 'i', 'b', 'br'],
+  content_unformatted: [],
+};
 // Список и настройки плагинов postCSS
 let postCssPlugins = [
   autoprefixer(), // настройки вынесены в package.json, дабы получать их для любой задачи
@@ -72,6 +79,7 @@ function compilePug() {
     .pipe(plumber())
     .pipe(debug({title: 'Compiles '}))
     .pipe(pug(pugOption))
+    .pipe(prettyHtml(prettyOption))
     .pipe(through2.obj(getClassesToBlocksList))
     .on('end', function(){checkBlockList(true)}) // компилируются все; можно убирать блоки, которых больше нет
     .pipe(dest(dir.build));
@@ -84,6 +92,7 @@ function compilePugFast() {
     .pipe(plumber())
     .pipe(debug({title: 'Compiles '}))
     .pipe(pug(pugOption))
+    .pipe(prettyHtml(prettyOption))
     .pipe(through2.obj(getClassesToBlocksList))
     .on('end', checkBlockList)
     .pipe(dest(dir.build));
@@ -306,7 +315,7 @@ function serve() {
   watch([`${dir.src}scss/**/*.scss`, `!${dir.src}scss/style.scss`], { events: ['all'], delay: 100 }, series(compileSass));
   watch([`${dir.src}js/**/*.js`, `!${dir.src}js/entry.js`, `${dir.blocks}**/*.js`], { events: ['all'], delay: 100 }, series(writeJsRequiresFile, buildJs, reload));
   watch([`${dir.blocks}**/img/*.{jpg,jpeg,png,gif,svg,webp}`], { events: ['all'], delay: 100 }, series(copyImg, reload));
-  watch([`${dir.blocks}sprite-svg/svg/*.svg`], { events: ['all'], delay: 100 }, series(generateSvgSprite, copyImg, reload));
+  watch([`${dir.blocks}sprite-svg/svg/*.svg`], { events: ['all'], delay: 100 }, series(generateSvgSprite, copyImg));
   watch([`${dir.blocks}sprite-png/png/*.png`], { events: ['all'], delay: 100 }, series(generatePngSprite, copyImg, compileSass));
 }
 

package.json

@@ -47,7 +47,6 @@
     "gulp-cleancss": "^0.2.2",
     "gulp-concat": "^2.6.1",
     "gulp-debug": "^4.0.0",
-    "gulp-html-beautify": "^1.0.1",
     "gulp-if": "^2.0.2",
     "gulp-imagemin": "^5.0.3",
     "gulp-insert": "^0.5.0",
@@ -55,6 +54,7 @@
     "gulp-notify": "^3.0.0",
     "gulp-plumber": "^1.1.0",
     "gulp-postcss": "^8.0.0",
+    "gulp-pretty-html": "^2.0.9",
     "gulp-pug": "^4.0.1",
     "gulp-pug-lint": "git+https://github.com/nicothin/gulp-pug-lint.git",
     "gulp-rename": "^1.2.2",

src/blocks/sprite-png/readme.md

 Из файлов папки `sprite-png/png/` в папку `sprite-png/img/` будет сгенерирован файл спрайта `sprite-ЧИСЛОВОЙ_ИНДЕКС.svg`, который далее будет скопирован в папку сборки.
 
-**Стилевой файл блока генерируется автоматически** и содержит примеси для использования спрайтов. Отдельный файл элемента `sprite-png__demo.scss` содержит вызов примеси, генерирующей стили для всех составных частей спрайта. Пример использования части спрайта для конкретного селектора:
+**Стилевой файл блока генерируется автоматически** и содержит примеси для использования спрайтов.
+
+Пример использования части спрайта для конкретного селектора:
 
 <pre class="code">
   <code>.selector {</code>

src/blocks/sprite-png/sprite-png__demo.scss

-// Просто добавляем все селекторы для вывода спрайтов
-
-@include sprites($spritesheet-sprites);

src/blocks/sprite-svg/readme.md

-Из файлов папки `sprite-svg/svg/` в папку `sprite-svg/img/` будет сгенерирован файл спрайта `sprite-svg.svg`, который далее будет скопирован в папку сборки. Стилевой файл блока не используется. SVG-файлы будут оптимизированы перед сборкой в спрайт. Сам спрайт имеет вид:
+Из файлов папки `sprite-svg/svg/` в папку `sprite-svg/img/` будет сгенерирован файл спрайта `sprite.svg`, который далее будет скопирован в папку сборки. Стилевой файл блока не используется. SVG-файлы будут оптимизированы перед сборкой в спрайт. Сам спрайт имеет вид:
 
 <pre class="code">
-  <code>&lt;svg xmlns="http://www.w3.org/2000/svg" style="display:none"&gt;</code>
+  <code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;</code>
   <code>  &lt;symbol id="icon-boo" viewBox="0 0 30 30"&gt;&lt;path d="..."/&gt;&lt;/symbol&gt;</code>
   <code>  &lt;symbol id="icon-bs" viewBox="0 0 28 28"&gt;&lt;path d="..."/&gt;&lt;/symbol&gt;</code>
   <code> ...</code>
@@ -12,16 +12,7 @@
 
 <pre class="code">
   <code>svg(width="32", height="32")</code>
-  <code>  use(xlink:href="img/sprite-svg.svg#icon-boo")</code>
+  <code>  use(xlink:href="img/sprite.svg#icon-boo")</code>
 </pre>
 
-<p class="alert alert--warning">Чтобы использовать ссылки на внешние svg-файлы со спрайтами, используйте <a href="https://www.npmjs.com/package/svg4everybody">svg4everybody</a> (включен в сборку по умолчанию).</p>
-
-Демонстрационный контент блока (иконки стрелок):
-
-<svg width="32" height="32">
-  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite-svg.svg#temp-icon-right-arrow"></use>
-</svg>
-<svg width="32" height="32">
-  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprite-svg.svg#temp-icon-left-arrow"></use>
-</svg>
+<p class="alert alert--warning">При использовании блока в проекте в сборку берётся <a href="https://www.npmjs.com/package/svg4everybody">svg4everybody</a>.</p>

src/blocks/sprite-svg/sprite-svg.js

-require('svg4everybody');
+const svg4everybody = require('svg4everybody');
 
 svg4everybody();