Посмотреть на GitHub Оригинал

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

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

Настройка инструментов

Bootstrap использует сценарии npm для своей системы сборки. Наш package.json включает удобные методы для работы с фреймворком, включая компиляцию кода, запуск тестов и т.д.

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

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

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

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

Наш package.json включает следующие команды и задачи:

Задача Описание
npm run dist npm run dist создает каталог /dist/ со скомпилированными файлами. Использует Sass, Autoprefixer и terser.
npm test Запускает тесты локально после запуска npm run dist
npm run docs-serve Создает и запускает документацию локально.

Запустите npm run, чтобы увидеть все сценарии npm.

Начните работу с Bootstrap через npm с помощью нашего начального проекта! Перейдите в репозиторий шаблонов twbs/bootstrap-npm-starter, чтобы узнать, как создать и настроить Bootstrap в своем собственном проекте npm. Включает компилятор Sass, Autoprefixer, Stylelint, PurgeCSS и иконки Bootstrap.

Sass

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

Если Вам требуются новые функции Sass или совместимость с новыми стандартами CSS, Dart Sass теперь является основной реализацией Sass и поддерживает API JavaScript, полностью совместимый с Node Sass. (за некоторыми исключениями, перечисленными на странице GitHub Dart Sass).

Мы увеличиваем точность округления Sass до 6 (по умолчанию это 5 в Node Sass), чтобы предотвратить проблемы с округлением в браузере. Если Вы используете Dart Sass, Вам не нужно будет это настраивать, поскольку этот компилятор использует точность округления, равную 10, и по соображениям эффективности не позволяет ее настраивать.

Autoprefixer

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

Мы храним список браузеров, поддерживаемых с помощью Autoprefixer, в отдельном файле в нашем репозитории GitHub. См. .browserslistrc для получения дополнительной информации.

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

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

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

Узнайте больше об использовании Hugo, прочитав его [документацию]](https://gohugo.io/documentation/) или [перевод официальной документации]](https://gohugo.ru/documentation/).

Исправление проблем

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