From 929479b854b646d0d447b1f338a4661925fa2228 Mon Sep 17 00:00:00 2001 From: PeterShon Date: Tue, 15 Dec 2020 16:25:29 +0300 Subject: [PATCH] first commit --- .editorconfig | 22 + .eslintignore | 5 + .eslintrc.json | 28 + .gitattributes | 8 + .gitignore | 16 + .pug-lint.json | 19 + .stylelintrc.json | 34 + LICENSE | 5 + README.md | 327 + build/css/style.css | 2299 +++ build/css/style.min.css | 2 + build/fonts/Larsseit-Bold.eot | Bin 0 -> 89284 bytes build/fonts/Larsseit-Bold.ttf | Bin 0 -> 89124 bytes build/fonts/Larsseit-Bold.woff | Bin 0 -> 38592 bytes build/fonts/Larsseit-Bold.woff2 | Bin 0 -> 26032 bytes build/fonts/Larsseit-ExtraBold.eot | Bin 0 -> 89488 bytes build/fonts/Larsseit-ExtraBold.ttf | Bin 0 -> 89292 bytes build/fonts/Larsseit-ExtraBold.woff | Bin 0 -> 37860 bytes build/fonts/Larsseit-ExtraBold.woff2 | Bin 0 -> 25416 bytes build/fonts/Larsseit-Light.eot | Bin 0 -> 92643 bytes build/fonts/Larsseit-Light.ttf | Bin 0 -> 92395 bytes build/fonts/Larsseit-Light.woff | Bin 0 -> 40196 bytes build/fonts/Larsseit-Light.woff2 | Bin 0 -> 27196 bytes build/fonts/Larsseit-Medium.eot | Bin 0 -> 89828 bytes build/fonts/Larsseit-Medium.ttf | Bin 0 -> 89576 bytes build/fonts/Larsseit-Medium.woff | Bin 0 -> 39044 bytes build/fonts/Larsseit-Medium.woff2 | Bin 0 -> 26416 bytes build/fonts/Larsseit-Thin.eot | Bin 0 -> 92872 bytes build/fonts/Larsseit-Thin.ttf | Bin 0 -> 92696 bytes build/fonts/Larsseit-Thin.woff | Bin 0 -> 39268 bytes build/fonts/Larsseit-Thin.woff2 | Bin 0 -> 26148 bytes build/fonts/Larsseit.eot | Bin 0 -> 91660 bytes build/fonts/Larsseit.ttf | Bin 0 -> 91436 bytes build/fonts/Larsseit.woff | Bin 0 -> 39796 bytes build/fonts/Larsseit.woff2 | Bin 0 -> 26832 bytes build/img/berrycup.png | Bin 0 -> 124991 bytes build/img/berrytable.jpg | Bin 0 -> 33327 bytes build/img/glad-niga.jpg | Bin 0 -> 35057 bytes build/img/logo.png | Bin 0 -> 743 bytes build/img/nigas-girl.jpg | Bin 0 -> 13554 bytes build/img/sad-niga.jpg | Bin 0 -> 24778 bytes build/img/smile-guys.jpg | Bin 0 -> 41789 bytes build/img/top-girl.jpg | Bin 0 -> 24251 bytes build/index.html | 4 + build/js/main.min.js | 183 + gulp/config.js | 29 + gulp/tasks/clean.js | 7 + gulp/tasks/copyDependencies.js | 13 + gulp/tasks/fonts.js | 8 + gulp/tasks/imageMinify.js | 22 + gulp/tasks/lighthouse.js | 70 + gulp/tasks/pug2html.js | 18 + gulp/tasks/script.js | 43 + gulp/tasks/serve.js | 34 + gulp/tasks/styles.js | 40 + gulp/tasks/svgSprite.js | 13 + gulpfile.js | 28 + package-lock.json | 17159 ++++++++++++++++ package.json | 81 + src/fonts/Larsseit-Bold.eot | Bin 0 -> 89284 bytes src/fonts/Larsseit-Bold.ttf | Bin 0 -> 89124 bytes src/fonts/Larsseit-Bold.woff | Bin 0 -> 38592 bytes src/fonts/Larsseit-Bold.woff2 | Bin 0 -> 26032 bytes src/fonts/Larsseit-ExtraBold.eot | Bin 0 -> 89488 bytes src/fonts/Larsseit-ExtraBold.ttf | Bin 0 -> 89292 bytes src/fonts/Larsseit-ExtraBold.woff | Bin 0 -> 37860 bytes src/fonts/Larsseit-ExtraBold.woff2 | Bin 0 -> 25416 bytes src/fonts/Larsseit-Light.eot | Bin 0 -> 92643 bytes src/fonts/Larsseit-Light.ttf | Bin 0 -> 92395 bytes src/fonts/Larsseit-Light.woff | Bin 0 -> 40196 bytes src/fonts/Larsseit-Light.woff2 | Bin 0 -> 27196 bytes src/fonts/Larsseit-Medium.eot | Bin 0 -> 89828 bytes src/fonts/Larsseit-Medium.ttf | Bin 0 -> 89576 bytes src/fonts/Larsseit-Medium.woff | Bin 0 -> 39044 bytes src/fonts/Larsseit-Medium.woff2 | Bin 0 -> 26416 bytes src/fonts/Larsseit-Thin.eot | Bin 0 -> 92872 bytes src/fonts/Larsseit-Thin.ttf | Bin 0 -> 92696 bytes src/fonts/Larsseit-Thin.woff | Bin 0 -> 39268 bytes src/fonts/Larsseit-Thin.woff2 | Bin 0 -> 26148 bytes src/fonts/Larsseit.eot | Bin 0 -> 91660 bytes src/fonts/Larsseit.ttf | Bin 0 -> 91436 bytes src/fonts/Larsseit.woff | Bin 0 -> 39796 bytes src/fonts/Larsseit.woff2 | Bin 0 -> 26832 bytes src/img/berrycup.png | Bin 0 -> 126993 bytes src/img/berrytable.jpg | Bin 0 -> 153629 bytes src/img/glad-niga.jpg | Bin 0 -> 335363 bytes src/img/logo.png | Bin 0 -> 1461 bytes src/img/nigas-girl.jpg | Bin 0 -> 164478 bytes src/img/sad-niga.jpg | Bin 0 -> 318741 bytes src/img/smile-guys.jpg | Bin 0 -> 427026 bytes src/img/top-girl.jpg | Bin 0 -> 274741 bytes src/js/anim-of-appear.js | 50 + src/js/body.js | 22 + src/js/header.js | 29 + src/js/main.js | 48 + src/js/move-up.js | 48 + src/js/whirligig.js | 11 + src/local_modules/jquery/dist/jquery.min.js | 2 + .../jquery/dist/jquery.slim.min.js | 2 + src/local_modules/normalize.css/normalize.css | 349 + src/pages/common/footer.pug | 21 + src/pages/common/header.pug | 16 + src/pages/common/layout.pug | 19 + src/pages/common/move-up.pug | 1 + src/pages/includes/index/about-us.pug | 19 + src/pages/includes/index/contact-us.pug | 12 + src/pages/includes/index/facts.pug | 19 + src/pages/includes/index/first.pug | 13 + src/pages/includes/index/should-know.pug | 10 + src/pages/includes/index/tile.pug | 22 + src/pages/includes/index/why-thrive.pug | 9 + src/pages/index.pug | 11 + src/styles/common/about-us.scss | 122 + src/styles/common/anim-of-appear.scss | 71 + src/styles/common/color-box.scss | 93 + src/styles/common/contact-us.scss | 158 + src/styles/common/facts.scss | 40 + src/styles/common/first.scss | 164 + src/styles/common/footer.scss | 129 + src/styles/common/global.scss | 41 + src/styles/common/header.scss | 254 + src/styles/common/move-up.scss | 72 + src/styles/common/should-know.scss | 121 + src/styles/common/text.scss | 26 + src/styles/common/tile.scss | 39 + src/styles/common/why-thrive.scss | 113 + src/styles/mixins/fonts.scss | 9 + src/styles/mixins/media.scss | 34 + src/styles/style.scss | 36 + src/styles/utils/fonts.scss | 10 + src/styles/utils/variables.scss | 24 + 131 files changed, 22806 insertions(+) create mode 100644 .editorconfig create mode 100644 .eslintignore create mode 100644 .eslintrc.json create mode 100644 .gitattributes create mode 100644 .gitignore create mode 100644 .pug-lint.json create mode 100644 .stylelintrc.json create mode 100644 LICENSE create mode 100644 README.md create mode 100644 build/css/style.css create mode 100644 build/css/style.min.css create mode 100644 build/fonts/Larsseit-Bold.eot create mode 100644 build/fonts/Larsseit-Bold.ttf create mode 100644 build/fonts/Larsseit-Bold.woff create mode 100644 build/fonts/Larsseit-Bold.woff2 create mode 100644 build/fonts/Larsseit-ExtraBold.eot create mode 100644 build/fonts/Larsseit-ExtraBold.ttf create mode 100644 build/fonts/Larsseit-ExtraBold.woff create mode 100644 build/fonts/Larsseit-ExtraBold.woff2 create mode 100644 build/fonts/Larsseit-Light.eot create mode 100644 build/fonts/Larsseit-Light.ttf create mode 100644 build/fonts/Larsseit-Light.woff create mode 100644 build/fonts/Larsseit-Light.woff2 create mode 100644 build/fonts/Larsseit-Medium.eot create mode 100644 build/fonts/Larsseit-Medium.ttf create mode 100644 build/fonts/Larsseit-Medium.woff create mode 100644 build/fonts/Larsseit-Medium.woff2 create mode 100644 build/fonts/Larsseit-Thin.eot create mode 100644 build/fonts/Larsseit-Thin.ttf create mode 100644 build/fonts/Larsseit-Thin.woff create mode 100644 build/fonts/Larsseit-Thin.woff2 create mode 100644 build/fonts/Larsseit.eot create mode 100644 build/fonts/Larsseit.ttf create mode 100644 build/fonts/Larsseit.woff create mode 100644 build/fonts/Larsseit.woff2 create mode 100644 build/img/berrycup.png create mode 100644 build/img/berrytable.jpg create mode 100644 build/img/glad-niga.jpg create mode 100644 build/img/logo.png create mode 100644 build/img/nigas-girl.jpg create mode 100644 build/img/sad-niga.jpg create mode 100644 build/img/smile-guys.jpg create mode 100644 build/img/top-girl.jpg create mode 100644 build/index.html create mode 100644 build/js/main.min.js create mode 100644 gulp/config.js create mode 100644 gulp/tasks/clean.js create mode 100644 gulp/tasks/copyDependencies.js create mode 100644 gulp/tasks/fonts.js create mode 100644 gulp/tasks/imageMinify.js create mode 100644 gulp/tasks/lighthouse.js create mode 100644 gulp/tasks/pug2html.js create mode 100644 gulp/tasks/script.js create mode 100644 gulp/tasks/serve.js create mode 100644 gulp/tasks/styles.js create mode 100644 gulp/tasks/svgSprite.js create mode 100644 gulpfile.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 src/fonts/Larsseit-Bold.eot create mode 100644 src/fonts/Larsseit-Bold.ttf create mode 100644 src/fonts/Larsseit-Bold.woff create mode 100644 src/fonts/Larsseit-Bold.woff2 create mode 100644 src/fonts/Larsseit-ExtraBold.eot create mode 100644 src/fonts/Larsseit-ExtraBold.ttf create mode 100644 src/fonts/Larsseit-ExtraBold.woff create mode 100644 src/fonts/Larsseit-ExtraBold.woff2 create mode 100644 src/fonts/Larsseit-Light.eot create mode 100644 src/fonts/Larsseit-Light.ttf create mode 100644 src/fonts/Larsseit-Light.woff create mode 100644 src/fonts/Larsseit-Light.woff2 create mode 100644 src/fonts/Larsseit-Medium.eot create mode 100644 src/fonts/Larsseit-Medium.ttf create mode 100644 src/fonts/Larsseit-Medium.woff create mode 100644 src/fonts/Larsseit-Medium.woff2 create mode 100644 src/fonts/Larsseit-Thin.eot create mode 100644 src/fonts/Larsseit-Thin.ttf create mode 100644 src/fonts/Larsseit-Thin.woff create mode 100644 src/fonts/Larsseit-Thin.woff2 create mode 100644 src/fonts/Larsseit.eot create mode 100644 src/fonts/Larsseit.ttf create mode 100644 src/fonts/Larsseit.woff create mode 100644 src/fonts/Larsseit.woff2 create mode 100644 src/img/berrycup.png create mode 100644 src/img/berrytable.jpg create mode 100644 src/img/glad-niga.jpg create mode 100644 src/img/logo.png create mode 100644 src/img/nigas-girl.jpg create mode 100644 src/img/sad-niga.jpg create mode 100644 src/img/smile-guys.jpg create mode 100644 src/img/top-girl.jpg create mode 100644 src/js/anim-of-appear.js create mode 100644 src/js/body.js create mode 100644 src/js/header.js create mode 100644 src/js/main.js create mode 100644 src/js/move-up.js create mode 100644 src/js/whirligig.js create mode 100644 src/local_modules/jquery/dist/jquery.min.js create mode 100644 src/local_modules/jquery/dist/jquery.slim.min.js create mode 100644 src/local_modules/normalize.css/normalize.css create mode 100644 src/pages/common/footer.pug create mode 100644 src/pages/common/header.pug create mode 100644 src/pages/common/layout.pug create mode 100644 src/pages/common/move-up.pug create mode 100644 src/pages/includes/index/about-us.pug create mode 100644 src/pages/includes/index/contact-us.pug create mode 100644 src/pages/includes/index/facts.pug create mode 100644 src/pages/includes/index/first.pug create mode 100644 src/pages/includes/index/should-know.pug create mode 100644 src/pages/includes/index/tile.pug create mode 100644 src/pages/includes/index/why-thrive.pug create mode 100644 src/pages/index.pug create mode 100644 src/styles/common/about-us.scss create mode 100644 src/styles/common/anim-of-appear.scss create mode 100644 src/styles/common/color-box.scss create mode 100644 src/styles/common/contact-us.scss create mode 100644 src/styles/common/facts.scss create mode 100644 src/styles/common/first.scss create mode 100644 src/styles/common/footer.scss create mode 100644 src/styles/common/global.scss create mode 100644 src/styles/common/header.scss create mode 100644 src/styles/common/move-up.scss create mode 100644 src/styles/common/should-know.scss create mode 100644 src/styles/common/text.scss create mode 100644 src/styles/common/tile.scss create mode 100644 src/styles/common/why-thrive.scss create mode 100644 src/styles/mixins/fonts.scss create mode 100644 src/styles/mixins/media.scss create mode 100644 src/styles/style.scss create mode 100644 src/styles/utils/fonts.scss create mode 100644 src/styles/utils/variables.scss diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..ce3a206 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,22 @@ +# Файл с настройками для редактора. +# +# Если вы разрабатываете в редакторе WebStorm, BBEdit, Coda или SourceLair +# этот файл уже поддерживается и не нужно производить никаких дополнительных +# действий. +# +# Если вы ведёте разработку в другом редакторе, зайдите +# на https://editorconfig.org и в разделе «Download a Plugin» +# скачайте дополнение для вашего редактора. + +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..b42d0eb --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +build +gulpfiles.js + +/gulp +/src/local_modules diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..9149658 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,28 @@ +{ + "env": { + "jquery": true + }, + "overrides": [ + { + "files": [ "src/**/*.js" ], + "extends": [ + "standard", + "htmlacademy/es6" + ], + "rules": { + "indent": [ + "error", + 4 + ], + "semi": [ + "error", + "never" + ], + "quotes": [ + "error", + "backtick" + ] + } + } + ] +} diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..91a6d99 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,8 @@ +* text eol=lf + +*.png binary +*.jpg binary +*.jpeg binary +*.webp binary +*.woff binary +*.woff2 binary diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1912b35 --- /dev/null +++ b/.gitignore @@ -0,0 +1,16 @@ +# Файлы и папки операционной системы +.DS_Store +Thumbs.db + +# Файлы редактора +.idea +*.sublime* +.vscode + +# Вспомогательные файлы +*.log* +node_modules/ +reports/ + +# Папка с собранными файлами проекта +# build/ diff --git a/.pug-lint.json b/.pug-lint.json new file mode 100644 index 0000000..1922377 --- /dev/null +++ b/.pug-lint.json @@ -0,0 +1,19 @@ +{ + "disallowClassAttributeWithStaticValue": true, + "disallowClassLiteralsBeforeIdLiterals": true, + "disallowDuplicateAttributes": true, + "disallowHtmlText": true, + "disallowIdAttributeWithStaticValue": true, + "disallowLegacyMixinCall": true, + "disallowMultipleLineBreaks": true, + "disallowSpaceAfterCodeOperator": true, + "disallowSpacesInsideAttributeBrackets": true, + "disallowStringConcatenation": true, + "requireClassLiteralsBeforeAttributes": true, + "requireLowerCaseAttributes": true, + "requireLowerCaseTags": true, + "requireStrictEqualityOperators": true, + "validateAttributeQuoteMarks": "\"", + "validateDivTags":true, + "validateLineBreaks":"LF" +} diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..c84c408 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,34 @@ +{ + "plugins": [ + "stylelint-scss" + ], + "extends": [ + "stylelint-config-standard", + "stylelint-config-standard-scss", + "stylelint-config-htmlacademy" + ], + "rules": { + "indentation": 4, + "at-rule-no-vendor-prefix": true, + "at-rule-empty-line-before": "always", + "scss/selector-no-redundant-nesting-selector": true, + "scss/at-import-partial-extension": "never", + "block-closing-brace-newline-before": "always", + "block-closing-brace-newline-after": "always", + "at-rule-name-case": "lower", + "at-rule-name-space-after": "always", + "at-rule-semicolon-newline-after": "always", + "at-rule-semicolon-space-before": "never", + "selector-max-class": 2, + "unit-whitelist": [ + "em", + "rem", + "%", + "px", + "vh", + "vm", + "vmax", + "vmin" + ] + } +} diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..8e11267 --- /dev/null +++ b/LICENSE @@ -0,0 +1,5 @@ +Copyright 2020 Denys Vykhrystiuk + +Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. + +THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..616e00d --- /dev/null +++ b/README.md @@ -0,0 +1,327 @@ +# Начало +Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года (скопировал я ее с сайта в 2017), я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать. + +Не только древность моей сборки мотивировала на эту статью, но и еще одна причина: мне больно смотреть, когда заходят на онлайн-сервисы для конвертации `scss`, минификации `javascript` и других рутинных задач. Самое забавное - когда сделали мелкую правку, снова нужно проходить все круги ~~ада~~ копипаста. + +Перед тем, как вы начнете читать, хочу сказать, что материала очень много, поэтому писал только основное. Слишком очевидных вещий старался не писать, но хотел, чтобы смог понять каждый новичок. Если будут непонятные моменты, то смело переходите по ссылкам и читайте более подробную информацию, а потом снова возвращайтесь к статье. Можете задавать вопросы в комментариях, всем постараюсь ответить. + + +# Поехали! +## Gulp +Начнем с главного в нашей сборке. + +Gulp - это наш фундамент, потому что он будет управлять всеми нашими задачами, другими словами, `taskmanager`. Концепция задач очень проста. Название асинхронной javascript функции равно названию задачи, и работает она по принципу: берет данные, трансформирует их и записывает результат. + +![](https://habrastorage.org/webt/lj/g3/hv/ljg3hvoy9axohgzzd19rde6ziwo.png) + + +Как видим, все просто: называем нашу задачу `css`, вызываем функцию `src`, которая берет данные по определенному шаблону и передает данные по трубе (функция `pipe()`). Внутри `pipe` вызываем функцию плагина, которая трансформирует наши данные и результат передает функцию `dest`. `dest` - записывает результат по указанному пути. + +С `pipe` можно выстраивать любые цепочки. + +![](https://habrastorage.org/webt/ia/ar/oj/iaarojs2o_yxufltm0wtwuglmvc.png) + + +В четвертой версии много чего изменилось, но на что нужно точно обратить внимание - это на `gulp.series()` и `gulp.parallel()`. Позже мы разберем параллельное выполнение задач. + +Как вы заметили, в примерах я экспортировал функции, в старом API использовали `gulp.task()`: +```javascript +gulp.task('taskName',function() { + //do somethings +}) +``` +Больше не рекомендуется использовать `gulp.task()`. + + Экспортирование функций позволяет разделять на публичные и приватные задачи. + - `публичные задачи` - экспортируются из вашего gulpfile, что позволяет запускать их командой gulp. + - `приватные задачи` - создаются для внутреннего использования, как правило, в составе `series()` или `parallel()` + +Пару слов о шаблонах поиска файлов в функции `src`. +- `templates/*.html` - ищет файлы с расширением `html` в папке `templates` +- `templates/**/*.html` - ищет файлы с расширением `html` во всех папках, которые в `templates` + +Более подробная информация [здесь](https://gulpjs.com/docs/en/getting-started/explaining-globs), [здесь](https://gulpjs.com/docs/en/api/concepts#globs) и [здесь](https://github.com/gulpjs/glob-parent). + +# Структура проекта +После того, как мы разобрались с фундаментом нашего проекта, начнем делать первые шаги. Проверяем, установлены ли `node.js` и `npm`. + +![](https://habrastorage.org/webt/gr/vw/jq/grvwjqqbyh2ntjayjcmo33p4uvm.png) + +Если они не установлены, следуйте инструкциям [здесь](https://nodejs.org/en/). + +Создаем папку для нашего проекта. Внутри инициализируем npm `npm init --yes` +Ключ `--yes` означает автоматические ответы вопрос по проекту. + +Создадим три папки: +- `build` - оптимизированные файлы для использования на сервере +- `src` - рабочая папка, где будут храниться все наши исходники +- `gulp` - здесь будут храниться наши tasks + +Еще добавим файл `.gitignore`, чтобы системные файлы не попадали в репозиторий. +Папка `/build` задокументирована, потому что часто использую `GitHub Pages` для демонстрации работы. + +Не забудьте установить gulp: npm install --save-dev gulp + + + +```gitignore +# Файлы и папки операционной системы +.DS_Store +Thumbs.db + +# Файлы редактора +.idea +*.sublime* +.vscode + +# Вспомогательные файлы +*.log* +node_modules/ + +# Папка с собранными файлами проекта +# build/ +``` + + +# Первые шаги + +## HTML +У НTML сильно громоздкий синтаксис, и при большой вложенности тегов сложно разобрать код. Еще одна проблема в том, что многие забывают закрывать теги. Можно возразить, что сейчас умные IDE без проблем индицируют эти проблемы, но, как правило, новички не обращают внимания, что там им говорит IDE, и еще грешат форматированием кода. + +![bad format html](https://hsto.org/files/646/cbc/f0a/646cbcf0a5374071b8396372602f3693.png) + + +Все наши проблемы решает [Pug](https://pugjs.org/language/doctype.html). Одного примера будет достаточно, чтобы понять, как его использовать. Не понимаю, почему этот плагин еще повсюду не используют. + +![](https://habrastorage.org/webt/pa/_j/g7/pa_jg7rtrtanxwpv8tvd0s2ftma.jpeg) + + +Новичкам советую обратить внимание еще на несколько возможностей: +- `Разделение на модули` - удобно, когда используешь БЭМ: один блок - один файл. [Подробнее.](https://pugjs.org/language/includes.html) + + +![](https://habrastorage.org/webt/sx/pp/lz/sxpplzqdystfm-q9skym2nvr860.jpeg) + + +- `Миксины` - удобно использовать для однотипных блоков. Например, карточки товаров или комментариев. [Подробнее.](https://pugjs.org/language/mixins.html) + + +![](https://habrastorage.org/webt/jz/hr/fh/jzhrfhh8czcyhetry6o2l9zmale.jpeg) + + +- `Циклы` для генерации однотипных блоков. [Подробнее.](https://pugjs.org/language/iteration.html) + + +![](https://habrastorage.org/webt/bu/uj/bn/buujbnhfu4atbiffqueuhj6dfw8.jpeg) + + +За последнее время сильно ничего не изменилось, только название с `Jade` на `Pug`. [Подробнее.](https://github.com/pugjs/pug#rename-from-jade) + +## Разделяем HTML +На нашем сайте будут две тестовые страницы `about` и `index`. Структура на страницах повторяется: есть блоки `