Тест: добавляется ссылка на тест

Прод: добавляется ссылка на боевой сайт

1. Работа со сборкой

   1. Запуск сервера для разработки
   2. Создание билда
   3. Создание билда для прода
   4. Линтинг кода
   5. Автоматическое создание компонента
   6. Автоматическое создание страницы
   7. Конвертация шрифтов
   8. Конвертация картинок в формат webp или avif
   9. Сжатие картинок (png, jpg, gif, webp, avif)
   10. Архивирование папки build

2. Работа с проектом

   1. Добавление метатегов
   2. Работа с роутером
   3. Аналитика
   4. Компоненты
      1. header
      2. footer
      3. sharing
      4. scrollToAnchor
      5. lazyLoad
      6. lazyBlur
      7. Swiper slider
      8. videoJs
      9. dropdown
      10. tabs
      11. popup
      12. form

3. Основные моменты и их возможные исправления

   1. Ошибки линтера PUG
   2. Линтер Style
   3. Настройка stylelint для VC Code
   4. Отмена минификации файла HTML после сборки билда

за основу взята сборка: ninelines-template

npm run start

npm run build

npm run build:prod

npm run lint

npm run lint:scripts

npm run lint:styles

npm run lint:pug

npm run create-files <НАЗВАНИЕ ПАПКИ>

Компонент - npm run create-files <НАЗВАНИЕ ПАПКИ>. Например: npm run create-files header - создаст папку header внутри папки src/components, содержащую следующий список файлов и подпапок: images (папка), data.js, header.js, header.pug, header.scss

npm run create-files <НАЗВАНИЕ ПАПКИ> page

Страница - npm run create-files <НАЗВАНИЕ ПАПКИ> page. Например: npm run create-files home page - создаст папку home внутри папки src/pages, с аналогичной созданию компонента структурой

npm run fonts:convert

Конвертация шрифтов npm run fonts:convert - (ttf, otf, svg) в форматы woff и woff2. Берет шрифты из папки src/assets/fonts и преобразует их в указанные выше форматы, с сохранением структуры и исходных форматов

Конвертация картинок в формат webp или avif. По умолчанию берет картинки из папок src/assets/images, src/components и src/pages и преобразует их в формат webp с качеством 90%

npm run images:convert

npm run images:convert avif

npm run images:convert quality=70

npm run images:convert only=<НАЗВАНИЕ ПАПКИ>

С указанием папки - npm run images:convert only=assets (только картинки из папки src/assets/images), npm run images:convert only=components (только картинки из папки src/components), npm run images:convert only=pages (только картинки из папки src/pages)

npm run images:convert path=<ПУТЬ К ПАПКЕ>

Например - npm run images:convert path=src/pages/home/images/background

npm run images:convert only=pages avif quality=50

npm run images:compress

npm run images:compress quality=80

npm run images:compress only=<НАЗВАНИЕ ПАПКИ>

С указанием папки - npm run images:compress only=assets (только картинки из папки src/assets/images), npm run images:compress only=components (только картинки из папки src/components), npm run images:compress only=pages (только картинки из папки src/pages)

npm run images:compress path=<ПУТЬ К ПАПКЕ>

Например - npm run images:compress path=src/components/header/burger

npm run images:compress only=assets avif quality=65

npm run zip

Создаст архив build.zip в корневой папке проекта

npm run zip v=<ВЕРСИЯ>

Например: npm run zip v=14 - создаст архив build-v14.zip

npm run zip name=<ИМЯ>

Например: npm run zip name=build_19022022 - создаст архив с именем build_19022022.zip

npm run clean

Удаление папки build

Автоматическое удаление файлов из билда для продакшн версии. По умолчанию будет удаляться файл robots.txt из папки build. Отменить удаление данного файла или добавить другие можно изменяя массив свойства build.remove внутри файла config.js. Например хотим добавить удаление .htaccess - remove: ['robots.txt'. '.htaccess']. Или ничего не будем удалять - remove: []. Данное правило будет работать только при условии, что метод html.isProd будет возвращать true, т.е. только когда собираем сборку командой npm run build:prod или если поменять его вручную

Мета теги Title, Description, image и т.д. указываются в src/data/data.js в объекте с ключом страницы (есть пример для 2х страниц).

import general from 'general';

const data = {
	general,
	home: {
		meta: {
			title: 'page home',
			description: 'home description',
			image: `${general.baseDir}image/share/share.jpg`,
			keywords: []
		}
	},
	article: {
		meta: {
			title: 'page article',
			description: 'article description',
			image: `${general.baseDir}image/share/share.jpg`,
			keywords: []
		}
	}
};

export default data;

Для перехода (без перезагрузки старницы) и анимации используется Barba JS. В main.js подключен router, а страницы оборачиваются в миксин router, если это не требуется нужно удалить router из кода.

Компонент счетчиков аналитики (src/components/analytics/analytics.pug) подключаются в head в файле base.pug. Сами счетчики предоставляются отделом аналитики и подключаются в файл analytics.pug, а события настраиваются в файле analytics.js

описание в процессе...

описание в процессе...

описание в процессе...

описание в процессе...

описание в процессе...

описание в процессе...

будет позже

будет позже

будет позже

будет позже

будет позже

будет позже

Для работы настроек проекта из .editorconfig, может потребоваться расширение EditorConfig for VS Code (для других редакторов пока нет возможности проверить)

Invalid line break

Если во время проверки линтера при коммите выходит ошибка Invalid line break, а файл был сохранен в правильном формате (LF), то скорее всего git при проверки автоматически конвертирует файлы в СRLF. Чтобы исправить данное поведение воспользуйтесь командой

git config --global core.autocrlf false

В файле .stylelintrc есть правило "order/properties-order", который отвечает за правильную последовательность свойств в стилях. Старайтесь придерживаться этого правила с самого начала, частые коммиты помогут выявлять ошибки в малых количествах, нежели править сотни ошибок перед пушем в конце дня. Со временем выработается привычка писать сразу правильно

1. Установите расширение stylelint
2. Переходим в extention settings и находим раздел Stylelint: Config
3. В данном разделе переходим по кнопке Edit in settings.json и в строчке "stylelint.config" указываем null ("stylelint.config": null,)

Теперь все ошибки линтера будут отображаться во время работы, что сократит время на правки во время коммита. Правила линтера тянутся из файла .stylelintrc для проекта.

1. Устанавливаем плагин https://www.npmjs.com/package/beautify-html-webpack-plugin
2. В корне проекта находим файл config/common.js
3. Подключаем плагин

   import BeautifyHtmlWebpackPlugin from 'beautify-html-webpack-plugin';

4. И добавляем его в код после строки ...plugins.HtmlPages(). Вместо options добавляем правила стилизации

   plugins.Dashboard,
   ...plugins.HtmlPages(),
   new BeautifyHtmlWebpackPlugin(options),
   plugins.RemoveFiles,