maxdenaro / gulp-maxgraph

My gulp settings

Gulp — сборка MaxGraph

Используется Gulp 5. Тестировалось на node.js 20.12.2

Начало работы

Для работы с данной сборкой в новом проекте, склонируйте все содержимое репозитория
git clone <this repo> Затем, находясь в корне проекта, запустите команду npm i, которая установит все находящиеся в package.json зависимости. После этого вы можете использовать любую из предложенных команд сборки (подробнее - ниже, в разделе npm-скрипты).

Структура папок и файлов

├── gulp/                         # Все настройки Gulp-сборки, разделенные по отдельным файлам
├── src/                          # Исходники
│   ├── js                        # Скрипты
│   │   └── main.js               # Главный скрипт
│   │   ├── _vars.js              # файл с переменными проекта
│   │   ├── _functions.js         # файл с готовыми функциями на js
│   │   ├── _components.js        # файл с подключениями компонентов
│   │   ├── components            # js-компоненты
│   ├── scss                      # Стили сайта (препроцессор sass в scss-синтаксисе)
│   │   └── main.scss             # Главный файл стилей
│   │   └── vendor.scss           # Файл для подключения стилей библиотек из папки vendor
│   │   └── _fonts.scss           # Файл для подключения шрифтов (можно использовать миксин)
│   │   └── _mixins.scss          # Файл для подключения миксинов из папки mixins
│   │   └── _vars.scss            # Файл для написания css- или scss-переменных
│   │   └── _settings.scss        # Файл для написания глобальных стилей
│   │   ├── components            # scss-компоненты
│   │   ├── mixins                # папка для сохранения готовых scss-компонентов
│   │   ├── vendor                # папка для хранения локальных css-стилей библиотек
│   ├── partials                  # папка для хранения html-частей страницы
│   ├── img                       # папка для хранения картинок
│   │   ├── svg                   # специальная папка для преобразования svg в спрайт
│   ├── resources                 # папка для хранения иных ассетов - php, видео-файлы, favicon и т.д.
│   │   ├── fonts                 # папка для хранения шрифтов в формате woff2
│   └── index.html                # Главный html-файл
└── gulpfile.js                   # Результирующий файл с настройками Gulp
└── package.json                  # файл с настройками сборки и установленными пакетами
└── .editorconfig                 # файл с настройками форматирования кода
└── .ecrc                         # файл с настройками пакета editorconfig-checker (исключает ненужные папки)
└── .stylelintrc.json             # файл с настройками stylelint
└── .stylelintignore              # файл с исключениями для stylelint
└── .htmlhintrc                   # файл с настройками htmlhint
└── README.md                     # документация сборки

Оглавление

1. npm-скрипты
2. Работа с html
3. Работа с CSS
4. Работа с JavaScript
5. Работа со шрифтами
6. Работа с изображениями
7. Работа с иными ресурсами
8. Типограф
9. Рекомендуемые плагины VS Code
10. Локальные сниппеты
11. Готовые модули
12. Изменения в версии 3.0.0 (от 21.04.2024)
13. Заключение

npm-скрипты

Вызывать различные Gulp-задачи нужно только через npm-команды, т.к. обычные Gulp-команды работают неполноценно.

• npm run stylelint — команда, запускающая проверку всех scss-файлов на соответствие stylelint.
• npm run style-fix — проверка и одновременный фикс scss-файлов на соответствие stylelint. Лично я сам все исправляю вручную, боясь, что автофикс что-то сломает.
• npm run code — команда, запускающая проверку всех файлов на соответствие editorconfig.
• npm run dev — базовая команда, которая запускает Gulp в режиме разработки.
• npm run build — команда, запускающая продакшн-версию сборки. В эту команду также включена проверка stylelint и editorconfig, и если файлы не соответсвуют правилам - ваш проект не соберется.
• npm run cache — команда, которую стоит запускать после npm run build__, если вам нужно загрузить новые файлы на хостинг без кэширования.
• npm run backend — команда для бэкенд-сборки проекта. Она лишена ненужных вещей из dev-сборки, но не сжата, для удобства бэкендера.
• npm run zip — команда собирает ваш готовый код в zip-архив.

Работа с html

Благодаря плагину gulp-file-include вы можете разделять html-файл на различные шаблоны, которые должны храниться в папке partials. Удобно делить html-страницу на секции.

Для вставки html-частей в главный файл используйте @include('partials/filename.html')

Если вы хотите создать многостраничный сайт - копируйте index.html, переименовывайте как вам нужно, и используйте.

При использовании команды npm run build, вы получите минифицированный html-код в одну строку для всех html-файлов.

Работа с CSS

В сборке используется препроцессор sass в синтаксисе scss.

Стили, написанные в components, следует подключать в main.scss. ВАЖНО: Обязательно удалить стили, которые написаны в main.scss для .page__body.

Чтобы подключить сторонние css-файлы (библиотеки) - положите их в папку vendor и подключите в файле _vendor.scss

Если вы хотите создать свой миксин - делайте это в папке mixins, а затем подключайте в файл _mixins.scss.

Если вы хотите использовать scss-переменные - подключите _vars.scss также в main.scss или в любое другое место, где он нужен, но обязательно удалите :root.

Для подключения css-файлов используйте директиву @import

В итоговой папке app/css создаются два файла:
main.css - для стилей страницы,
vendor.css - для стилей всех библиотек, использующихся в проекте.

При использовании команды npm run build, вы получите минифицированный css-код в одну строку для всех css-файлов.

Работа с JavaScript

Для сборки JS-кода используется webpack.

JS-код лучше делить на компоненты - небольшие js-файлы, которые содержат свою, изолированную друг от друга реализацию. Такие файлы помещайте в папку components, а потом импортируйте в файл _components.js

В файле vars.js должны храниться базовые переменные проекта, вроде нахождения элементов и т.д.

В файле main.js ничего менять не нужно, он сделан просто как результирующий.

Подключать библиотеки в сборку можно только с помощью npm. Для этого установите нужный пакет с помощью его команды, создайте в папке components файлик, импортируйте туда библиотеку и работайте с ней. Не забудьте импортировать этот файл в файл _components.js.

При использовании команды npm run build, вы получите минифицированный js-код в одну строку для всех js-файлов.

Работа со шрифтами

В сборке реализована поддержка только формата woff2, т.к. другие форматы шрифтов не актуальны (это значит, что в миксине подключения шрифтов используется только данный формат).

Загружайте файлы woff2 в папку resources/fonts, а затем вызывайте миксин @font-face в файле _fonts.scss.

Также не забудьте прописать эти же шрифты в <link preload> в html.

Работа с изображениями

Любые изображения, кроме favicon кладите в папку img.

Если вам нужно сделать svg-спрайт, кладите нужные для спрайта svg-файлы в папку img/svg. При этом, такие атрибуты как fill, stroke, style будут автоматически удаляться. Иные svg-файлы просто оставляйте в папке img.

При использовании команды npm run build, вы получите минифицированные изображения в итоговой папке img.

В сборке доступна поддержка webp формата. Подключить его вы можете через тег picture. Для background можно использовать обычные jpg или png, либо использовать image-set там, где это возможно.

Работа с иными ресурсами

Любые ресурсы (ассеты) проекта, под которые не отведена соответствующая папка, должны храниться в папке resources. Это могут быть видео-файлы, php-файлы (как, например, файл отправки формы), favicon и прочие.

Типограф

Для корректного отображения текста на странице был подключен плагин типограф, которые автоматически добавит неразрывные пробелы и иные символы, чтобы текст везде отображался по всем правилам русского языка.

Рекомендуемые плагины для VS Code

Я рекомендую использовать именно VS Code, и в сборке реализовано взаимодействие именно с этим редактором. Так, при открытии папки со сборкой в VS Code, редактор предложит вам ранее не установленные плагины, которые подойдут для корректной работы сборки.

Самый важный из них – projects snippets, этот плагин "включает" локально написанные сниппеты для сборки. Данный плагин не всегда работает корректно, в этом случае просто перезапустите VS Code.

Локальные сниппеты

Для удобства и быстроты разработки были добавление локальные сниппеты (находятся в папке .vscode/snippets), которые работают благодаря плагину, описанному выше. Все сниппеты начинаются с префикса g-. В сниппетах пока только html (быстрое создание навигации, соцсетей, корректного тега picture с webp и avif и так далее).

Некоторые сниппеты тесно связаны с scss-миксинами, например кнопка-бургер. Сниппет g-burger создаст вам html-разметку бургера, а подключение миксина @include burger добавит для него стили, что крайне удобно.

Готовые модули

В сборке присутствуют готовые, часто-используемые модули под различные задачи. Ниже будет перечислен уже добавленный функционал.

Внимание! В файле functions.js описаны лишь подключения всех нужных модулей. Рекомендуется использовать все это в отдельных файлах. Например, если вам нужно создать модальное окно, создаете файл modal.js в папке components, подключаете его в файл components.js и уже в файле modal.js используете код подключения.

Бургер меню

Вы можете очень быстро добавить рабочий бургер к себе на страницу, для этого нужно:

1. В html вызвать сниппет g-burger
2. На ваше потенциальное меню в html добавить атрибут data-menu
3. В scss вызвать миксин burger

.burger { @include burger }

4. Зайти в файл js/_functions.js и скопировать строку с подключением js-файла бургера, после подключить в вашем файле для бургера.
5. Настроить стили показа меню под себя с помощью класса menu--active

Модальное окно

Вы можете очень быстро добавить рабочее модальное окно к себе на страницу, для этого нужно:

1. В html вызвать сниппет g-graph-btn. Он создаст кнопку для модального окна, ваша задача лишь заполнить атрибут data-graph-path
2. Далее вызвать сниппет g-graph-modal. Он создаст базовую разметку окна. Ваша задача - сделать окно по макету, заполнить контент и обязательно обозначить атрибут data-graph-target с тем же значением, что и у data-graph-path
3. Зайти в файл vendor.scss и раскомментировать строку с подключением файла graph-modal.min.css
4. Зайти в файл js/_functions.js и скопировать строку с импортом и подключением библиотеки GraphModal, после подключить в вашем файле для модального окна.

Управление скроллом

Вы можете отключать\включать скролл на странице (работает даже на iPhone). Для этого нужно:

1. Зайти в файл js/_functions.js и скопировать строку с импортом функций disableScroll, enableScroll. После подключить в вашем файле для отключения/включения скролла. Важно!. Если на странице присутствуют блоки с фиксированным позиционированием (например, шапка), добавьте ей класс fixed-block, чтобы этот блок не прыгал при отключении скролла.

Табы

Вы можете очень быстро добавить рабочие табы к себе на страницу, для этого нужно:

1. В html вызвать сниппет g-tabs. Он создаст разметку для табов, ваша задача лишь заполнить атрибут data-tabs
2. Для класса .tabs вызвать миксин tabs в scss (или же использовать подключение скрипта библиотеки из npm в файле vendor.scss)
3. Зайти в файл js/_functions.js и скопировать строку с импортом и подключением библиотеки GraphTabs, после подключить в вашем файле для табов.

Валидация и отправка данных на почту

Вы можете быстро настроить валидацию и отправку данных на почту. Как это использовать:

1. Создать форму, указав у нее уникальный класс. Также указать уникальные классы для полей ввода.
   
2. Создать массив, в котором будут переданы правила плагина just-validate, например:

const rules1 = [
  {
    ruleSelector: '.input-name',
    rules: [
      {
        rule: 'minLength',
        value: 3
      },
      {
        rule: 'required',
        value: true,
        errorMessage: 'Заполните имя!'
      }
    ]
  },
  {
    ruleSelector: '.input-tel',
    tel: true,
    telError: 'Введите корректный телефон',
    rules: [
      {
        rule: 'required',
        value: true,
        errorMessage: 'Заполните телефон!'
      }
    ]
  },
];

ВАЖНО. Если в вашей форме есть поле с телефоном, обязательно пропишите в массиве с правилами новые поля: tel: true, telError: 'Ошибка при вводе телефона'. 3. Подключить функцию validateForms, она находится в functions.js, передав туда три параметра: 3.1. Строку с классом формы 3.2. Массив правил 3.3. Если нужно, можно создать свою функцию, которая выполнится после отправки, тогда ее тоже нужно будет передать как аргумент функции validateForms. 4. Также эта функция поддерживает работы с множественными чекбоксами/радиокнопками. Третьим параметром в функцию можно передать массив с настройками:

const checks = [
  {
    selector: ".checkbox-group",
    errorMessage: "Выберите чекбоксы",
  }
];

Пример кода:

import { validateForms } from './functions/validate-forms';
const checks = [
  {
    selector: ".checkbox-group",
    errorMessage: "Выберите чекбоксы",
  }
];
const rules1 = [
  {
    ruleSelector: '.input-name',
    rules: [
      {
        rule: 'minLength',
        value: 3
      },
      {
        rule: 'required',
        value: true,
        errorMessage: 'Заполните имя!'
      }
    ]
  },
  {
    ruleSelector: '.input-tel',
    tel: true,
    telError: 'Введите корректный телефон',
    rules: [
      {
        rule: 'required',
        value: true,
        errorMessage: 'Заполните телефон!'
      }
    ]
  },
];

const afterForm = () => {
  console.log('Произошла отправка, тут можно писать любые действия');
};

validateForms('.form-1', rules1, checks, afterForm);

Throttle-функция

Чтобы сгладить управление частоиспользуемыми событиями, вы можете использовать готовую функцию throttle. Для этого нужно:

1. В нужном месте импортировать функцию throttle()
2. Написать нужную вам функцию, например, func()
3. Создать переменную, в которую поместить вызов вашей фукнции внутри throttle, например: let f = throttle(func)
4. Использовать эту переменную как функцию в вызове, например: window.addEventListener('resize', f)

Фикс фулскрин блоков

Нередко блоки с высотой 100vh вызывают проблемы в мобильных браузерах. Решить это поможет готовый модуль fix-fullheight:

1. Раскомментируйте строку с импортом файла fix-fullheight.js
2. Назначьте на нужный вам блок высоту не 100vh, а var(--vh)

Для этой функции используется ранее упомянутый throttle. Вы можете убрать его, либо изменить время внутри файла fix-fullheight.js.

Получение высоты шапки

Иногда требуется получить точную высоту шапки, если она сделана абсолютным или фиксированным позиционированием, и для этого есть функция getHeaderHeght. Как ее использовать:

1. Раскомментируйте строку с импортом файла header-height.js
2. Используйте css-переменную --header-height в нужном вам месте

Необязательно использовать функции именно в файле functions, делайте как удобно вам.

Кастомный скролл

Для реализации кастомного скролла в сборку установлен плагин simplebar.js. Как его использовать:

1. Раскомментируйте строку с импортом плагина simplebar
2. Добавьте нужному блоку максимальную высоту и атрибут data-simplebar

Функции определения вьюпорта

Вы можете запускать скрипты на определенной ширине (пока что поддержка ресайза не реализована) с помощью готовых функций isMobile(), isTablet(), isDesktop(). Для этого нужно лишь подключить нужную из них из файла, а затем использовать внутри условия if.

Тултипы

Вы можете быстро создать рабочий, доступный тултип, который к тому же будет сам рассчитывать отступы с помощью js. Как это использовать:

1. В html вызвать сниппет g-tooltip. Он создаст кнопку для модального окна, ваша задача лишь заполнить атрибуты aria-describedby и id.
2. Далее нужно подключить тултипы (код в файле functions.js), и вместо el передать id или class кнопки тултипа, а вместо tooltip передать id или class самого тултипа.
3. После этого можете стилизовать тултип как вам угодно.

Слайдер

Вы можете быстро создать рабочий swiper-слайдер. Как это использовать:

1. В html вызвать сниппет g-swiper. Он создаст базовую структуру свайпер-слайдера, вам нужно добавить свой класс для свайпер-контейнера.
2. Раскомментировать строку с подключением стилей в файле vendor.scss
3. Подключить сам свайпер (код в файле functions.js) и использовать его, следуя документации.

Анимации по скроллу

Вы можете быстро набросать анимаций по скроллу с помощью плагина. Как это использовать:

1. Подключить код библиотеки AOS.js (код в файле functions.js) и инициализировать его.
2. С помощью атрибутов из документации плагина вызывать те или иные анимации, или написать свою.

Параллакс по скроллу

Вы можете быстро набросать параллакс элементов по скроллу с помощью плагина. Как это использовать:

1. Подключить код библиотеки rellax.js (код в файле functions.js) и инициализировать его, передав класс элемента (элементов).
2. Задать этот класс нужным элементам, а также использовать атрибуты из документации для кастомизации анимаций.

Свайпы на мобильных устройствах

Вы можете реализовывать различные взаимодействия со страницей через свайпы на мобильных устройствах с помощью плагина. Как это использовать:

1. Подключить код библиотеки swiped-events.js (код в файле functions.js).
2. Использовать различные события из библиотеки плагина.

Миксин для flex-расстановки элементов.

В последней версии сборки я добавил миксин flex-layout (можно найти в папке mixins), в котором реализована типичная сетка для карточек. Вы можете выбирать нужные вам настройки, чтобы сделать сетку быстро и без проблем. Например:

<div class="cards">
  <div class="cards__item">Текст</div>
  <div class="cards__item">Текст</div>
  <div class="cards__item">Текст</div>
  <div class="cards__item">Текст</div>
  <div class="cards__item">Текст</div>
  <div class="cards__item">Текст</div>
</div>

$options: (
  parentClass: "cards",
  itemsClass: "cards__item",
  desktopGap: 30px,
  desktopElems: 3,
  tablet: "1024px",
  tabletElems: 2,
  tabletGap:  30px,
  mobile: "600px",
  mobileElems: 1,
  mobileGap: 20px
);

@include flex-layout($options);

В опциях можно выбрать класс-родитель (или же флекс-контейнер, класс для потомков, какой у них будет отступ, на каких разрешениях будет меняться кол-во элементов).

Изменения в версии 3.0.0 (от 21.04.2024)

1. Версия Gulp изменена на пятую.
2. Обновлены все нужные для работы пакеты.
3. Теперь сборка разделена на отдельные файлы, которые хранятся в папке gulp.
4. Удалены некоторые пакеты, такие как smooth-scroll или js-focus-visible, т.к. уже не нужны в 2024 году.
5. Обновлен конфиг-файл stylelint, т.к. старый не работал с новой версией.
6. Немного обновлены базовые стили сборки: 6.1. min-width по умолчанию теперь 360, т.к. телефонов меньше почти нет. 6.2. box-sizing: border-box задан глобально (без inherit), т.к. за все время использования сборки понял, что это лишено смысла. 6.3. по умолчанию у .page добавлено свойство scroll-behavior.
7. Немного обновлены скрипты и модули: 7.1. Изменился метод подключения swiper. 7.2. Изменился метод подключения Inputmask. 7.3. Изменилась функция валидации.
8. Все команды сборки теперь должны запускаться только через npm-команды.
9. Прочие мелочи.

Тестировал сборку на своих рабочих проектах, все запускалось без проблем.

Заключение

Спасибо всем, кто использует сборку! Если вы заметили какую-либо ошибку, пришлите пожалуйста issue с подробным описанием проблемы, я все смотрю и постараюсь решить. Спасибо!

gulp-maxgraph's Issues

Вложенная страница

Подскажите пожалуйста! Есть страницы: index.html, about.html и article-1.html, которая находиться в папке blog, index.html и about.html нет проблем, все работает, сервер, сборка и тд, но если путь /blog/article-1.html - страница не найдена, в сборке не участвует - как исправить?

Ошибки при nmp run build

src/scss/mixins/_layout.scss
18:24 ✖ Expected map.get instead of map-get scss/no-global-function-names
23:24 ✖ Expected map.get instead of map-get scss/no-global-function-names

✖ 2 problems (2 errors, 0 warnings)

Модалка из модалки

Привет!
Как я понял модалку из модалки вызвать не получится в текущей сборке.
Возможна вообще доработка такая?

Работа с async / await

Добрый день, Максим!
Пользуюсь вашей сборкой уже несколько месяцев, всё круто и хорошо.
Но есть вопрос по асинхронным функциям, подскажите как реализовать корректную работу сборки с использованием данных функций, помогите решить вопрос 🙋.
При использовании асинхронной функции консоль выдает ошибку: Error: Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)

Для решения данной проблемы я установил плагин '@babel/plugin-syntax-top-level-await' и прописал новое условие для webpack: topAwait: true
Но видимо этого не достаточно, либо я делаю не то, что нужно.

const scripts = () => {
return src(paths.srcMainJs)
.pipe(plumber({
errorHandler: notify.onError({
title: "JS",
message: "Error: <%= error.message %>"
})
}))
.pipe(webpackStream({
mode: isProd ? 'production' : 'development',
output: {
filename: 'main.js',
},
module: {
rules: [{
test: /.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: "defaults",
// Включение эксперимента с верхнеуровневым ожиданием
// (top-level await)
topAwait: true
}]
]
}
}
}]
},
devtool: !isProd ? 'source-map' : false
}))
.on('error', function (err) {
console.error('WEBPACK ERROR', err);
this.emit('end');
})
.pipe(dest(paths.buildJsFolder))
.pipe(browserSync.stream());
}

Так сейчас выглядит файл.

Проблема с подключением скрипта.

Здравствуйте, подключил карту яндекса внизу страницы, как и посоветовали в предыдущей теме. Возникла проблема с подключением и других частей кода. Код работает. Когда я его прописал в тегах внизу страницы - они свою работу выполняют.

Все действия повторял за Вами из этого урока: https://rutube.ru/video/06997803df3fdf02f4dec6e7500b5f6c/

Вот что получается у меня:

Что я упускаю?

Разделение js файлов

Максим, добрый день!
При верстке многостраничного сайта предпочтительнее подключение скриптов отдельно для каждой страницы html, чтобы использовать только необходимые для этой страницы подключения. Но js компоненты компилируются в один файл main.js
Возможно ли реализовать отдельное подключение?

Error [ERR_INVALID_PACKAGE_TARGET]

При попытке запуска командой Gulp выдает ошибку:
Error [ERR_INVALID_PACKAGE_TARGET]: Invalid "exports" main target "dist/typograf.js" defined in the package config C:\Users\root\Desktop\gulp-maxgraph-master\node_modules\typograf\package.json; targets must start with "./"

Что может мешать запуску?

1

При backend разработке, криво собирается html

При gulp backend, html в тех местах где используется file-include, собирается криво, с неправильными отступами.

Проблема с стилей

Здравствуйте, Максим Васянович!
Я впервые использую ваша сборка GULP.
Мне очень понравится ваша сборка. я смотрел ютуб твой канал видео про инструкция сборка GULP.
Но у меня пришли проблема сборку стиль. Не возможно локальные файлы в scss vendor.
Я все соблюдал порядок подключения.
как решить эту проблему?
Покажу образ ошибку (фото), здесь
https://ibb.co/dfVsr12
https://ibb.co/t361Ytd
https://ibb.co/6XKJmgT
https://ibb.co/pP7djRt
(сайт надежный) https://ru.imgbb.com/
Спасибо большое!

Мелкие нюансы для доработки

1. Опция overrideBrowserslist в qulpfile.js - сами авторы плагина Autoprefixer не рекомендуют использовать данную опцию. Что нужно использовать вместо этого - у них написано.
2. Не все функции в qulpfile.js имеют комментарий - например, у resources, images, webpImages их нет. Что, например, делает cache? Нет комментария. Мелочь, но неприятно. Тебе понятно, а кому-то другому - нет. Всем функциям нужны комментарии, лучше чуть развёрнутее.
3. Не помешала бы работа и с другими типами шрифтов, кроме имеющихся.
4. В readme.md нужен якорь наверх хотя бы в конце файла. Это удобно и нужно.
5. В файле _settings.scss: display: none !important; /* stylelint-disable-line declaration-no-important */ - так делать не стоит, это очень плохая практика. Лучше комментарии располагать выше.
6. В файле _settings.scss - много стилей, непонятно зачем и для каких случаев должны использоваться. Тоже местами не хватает поясняющих комментариев.

Это пока всё, что увидел навскидку. Может что ещё будет. ;-)

npm ERR! Build failed with error code: 1

При попытке установить зависимости сборки стабильно вылетает ошибка.
Прикладываю логи с python и без.
Первый лог:
2021-12-13T19_50_30_926Z-debug-0.log
Второй лог:
2021-12-14T10_07_13_083Z-debug-0.log

HTMLMinify - выбрасывает <span>sometext</span> из структуры

Максим, добрый день.

Заметил, что при сборке gulp build, где используется функция HTMLMinify, происходит выброс тега <span> с содержимым из тега <a>. А также выбрасывает <svg><use> из тега <a>.

<ul class="list-reset market__header-sort market-sort"> <li class="market-sort__item"> <a href="javascript:void(0);" class="btn btn-reset btn-transparent market-sort__btn active" > </li> <span>по цене</span> <svg class="sort-triangle"> <use xlink:href="img/sprite.svg#sort-triangle"></use> </svg> </a> <li class="market-sort__item"> <a href="javascript:void(0);" class="btn btn-reset btn-transparent market-sort__btn" > </li> <span>по рейтингу</span> <svg class="sort-triangle"> <use xlink:href="img/sprite.svg#sort-triangle"></use> </svg> </a> <li class="market-sort__item"> <a href="javascript:void(0);" class="btn btn-reset btn-transparent market-sort__btn" > </li> <span>по скорости выполнения</span> <svg class="sort-triangle"> <use xlink:href="img/sprite.svg#sort-triangle"></use> </svg> </a> </ul>

как найти плагин projects snippets?

Рекомендуемые плагины для VS Code

Самый важный из них – projects snippets

добавь ссылочку, пожалуйста. не для ленивых, вот без пол литра не понять, что хотел сказать автор.

Сборка не обновляет проект при изменениях

Запускаю сборку, но при изменении разметки или стилей не обновляется страница. Консоль ошибок не выдает и при этом конфигурации сборки я не менял как таковой, в чем может быть причина? Каждый раз проект перезапускать для отображения изменений приходится

Gulp

Build FTP

Предлагаю в сборку добавить функцию выгрузи на удалённый фтп сервер или rsync,загрузка только изменённых файлов

_functions.js ошибка подключения enable-scroll

Не уверен что ошибка стоит создания целого issue, но в подключении модуля enable-scroll есть опечатка.

// import { enableScroll } from './functions/disable-scroll';

заменить на:
// import { enableScroll } from './functions/enable-scroll';

Если ошибка слишком незначительна для указания, поправьте меня и я буду в следующий раз вести себя скромнее.

"npm i " выдает ошибку с установкой [email protected]

2023-07-18T13_45_43_772Z-debug-0.log

После клонирования и "npm i " выдает ошибку с установкой [email protected]

папка parts

"а вот html (и js, если нужен) код к ним написан в соответствующих файлах в папке parts. "

не нашел такой папки в проекте.

вирус

в сборке в файле "_postinstall.js" обнаружен троян JS.Siggen5.44590.
вот что пишет антивирус :
"Объект";"Угроза";"Действие";"Путь";
"_postinstall.js";"JS.Siggen5.44590";"Перемещено";"C:\Users\javaScript\верстка\gulp-maxgraph\node_modules\es5-ext_postinstall.js";

Ошибка при запуске валидатора

✖ An error occurred while processing validator execution!
Unexpected token � in JSON at position 7

Вот такая ошибка возникает при попытке запустить npm run html

При этом папка app существует и в ней есть html файлы.

Не конвертирует шрифты

Не конвертирует шрифты из ttf в woff2

Не инициализируется карта Яндекса

При выполнении задания SKILLBOX по совету куратора использую Вашу сборку.

Всё пока работает, быстро обновляются изменения. Однако при работе с картами возникла проблема.
Согласно инструкции я сделал:

1. Отдельный файл в components map.js
2. В _components.js прописываю импорт import './components/map';
3. В head.html прописываю <script src="https://api-maps.yandex.ru/2.1?apikey=()&lang=ru_RU"></script> с ключом yandex api.
4. В консоли ошибок нет.

В связи с этим, мне кажется, что что-то куда-то ещё нужно прописать, чтобы карта появилась.

В собственной сборке карта работает и даже без api ключа. Поэтому не могу понять почему этого не происходит в данном случае.