Тест: добавляется ссылка на тест
Прод: добавляется ссылка на боевой сайт
за основу взята сборка: 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"
, который отвечает за правильную последовательность свойств в стилях. Старайтесь придерживаться этого правила с самого начала, частые коммиты помогут выявлять ошибки в малых количествах, нежели править сотни ошибок перед пушем в конце дня. Со временем выработается привычка писать сразу правильно
- Установите расширение stylelint
- Переходим в
extention settings
и находим разделStylelint: Config
- В данном разделе переходим по кнопке
Edit in settings.json
и в строчке"stylelint.config"
указываемnull
("stylelint.config": null,
)
Теперь все ошибки линтера будут отображаться во время работы, что сократит время на правки во время коммита. Правила линтера тянутся из файла .stylelintrc
для проекта.
- Устанавливаем плагин https://www.npmjs.com/package/beautify-html-webpack-plugin
- В корне проекта находим файл
config/common.js
- Подключаем плагин
import BeautifyHtmlWebpackPlugin from 'beautify-html-webpack-plugin';
- И добавляем его в код после строки
...plugins.HtmlPages()
. Вместоoptions
добавляем правила стилизацииplugins.Dashboard, ...plugins.HtmlPages(), new BeautifyHtmlWebpackPlugin(options), plugins.RemoveFiles,