Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

Инструменты сборки

Узнайте, как использовать включенные в Bootstrap сценарии npm для создания нашей документации, компиляции исходного кода, запуска тестов и многого другого.

На этой странице

Установка инструментария

Bootstrap в своей автоматической системе сборки использует скрипты NPM. Package.json содержит удобные методы для работы с NPM, включая компиляцию, тесты и прочее.

Для запуска автоматической системы сборки и запуска нашей документации локально, вам понадобится копия исходников Bootstrap и Node. Выполните следующие шаги:

  1. Загрузите и установите Node, который мы используем для управления нашими зависимостями.
  2. Загрузите исходники Bootstrap или используйте репозиторий Bootstrap.
  3. Перейдите в корневой каталог /bootstrap и запустите команду npm install для установки локальных зависимостей, перечисленных в package.json.

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

Использование скриптов npm

Наш package.json включает в себя множество задач для разработки проекта. Запустите npm run чтобы увидеть все скрипты npm в вашем терминале. Основные задачи включают в себя:

Задача Описание
npm start Компилирует CSS и JavaScript, создает документацию и запускает локальный сервер.
npm run dist Создает каталог dist/ со скомпилированными файлами. Требуются Sass, Autoprefixer и terser.
npm test Запускает локальные тесты после запуска npm run dist
npm run docs-serve Создает и запускает документацию локально.
Начните работу с Bootstrap через npm с помощью нашего начального проекта! Перейдите в репозиторий шаблонов twbs/bootstrap-npm-starter, чтобы узнать, как создать и настроить Bootstrap в своем собственном проекте npm. Включает компилятор Sass, Autoprefixer, Stylelint, PurgeCSS и иконки Bootstrap.

Sass

Bootstrap использует Dart Sass для компиляции наших исходных файлов Sass в файлы CSS (включенные в наш процесс сборки), и мы рекомендуем Вам сделать то же самое, если Вы компилируете Sass с использованием собственного конвейера активов. Ранее мы использовали Node Sass для Bootstrap v4, но LibSass и пакеты, созданные на его основе, включая Node Sass, теперь устарели.

Dart Sass использует точность округления 10 и из соображений эффективности не позволяет изменять это значение. Мы не снижаем эту точность во время дальнейшей обработки нашего сгенерированного CSS, например, во время минификации, но если Вы решите это сделать, мы рекомендуем поддерживать точность не менее 6, чтобы предотвратить проблемы с округлением в браузере.

Автопрефиксер

Bootstrap использует Автопрефиксер (который участвует в процессе автоматической сборки) для автоматического добавления «вендорных префиксов» в некоторые свойства CSS во время процесса сборки. Это экономит наше времяи и код, позволяя писать ключевые части кода CSS за один раз, устраняя при этом необходимость в миксинах от поставщиков, подобных тем, что есть в v3.

Список браузеров с поддержкой автопрефиксера представлен в отдельном файле в нашем репозитории GitHub. Подробнее смотрите здесь: .browserslistrc.

RTLCSS

Bootstrap использует RTLCSS для обработки скомпилированного CSS и преобразования его в RTL - в основном заменяя свойства, учитывающие горизонтальное направление (например, padding-left) на противоположные им. Это позволяет создавать CSS только один раз и вносить незначительные изменения с помощью директив RTLCSS control и value.

Локальная документация

Для локального запуска нашей документации требуется использовать Hugo, который устанавливается через пакет hugo-bin npm. Hugo - это невероятно быстрый и достаточно расширяемый генератор статических сайтов, который предоставляет нам базовые включения, файлы на основе Markdown, шаблоны и многое другое. Вот как это сделать:

  1. Выполните установку инструментария, чтобы установить все зависимости.
  2. Из каталога root /bootstrap запустите npm run docs-serve в командной строке.
  3. Откройте http://localhost:9001/ в вашем браузере и вуаля:-)

Узнайте больше об использовании Hugo, ознакомившись с документацией.

Отслеживание багов

Если возникнут проблемы с установкой зависимостей, удалите все предыдущие версии зависимостей (глобальные и локальные). После этого, повоторно выполните команду npm install.