in English

Ferramentas de construção

Aprenda a usar os scripts npm incluídos no Bootstrap para criar nossa documentação, compilar código-fonte, executar testes e muito mais.

Configuração de ferramentas

Bootstrap usa scripts npm para seu sistema de compilação. Nosso package.json inclui métodos convenientes para trabalhar com a estrutura, incluindo compilação de código, execução de testes e muito mais.

Para usar nosso sistema de compilação e executar nossa documentação localmente, você precisará de uma cópia dos arquivos de origem do Bootstrap e do Node. Siga estes passos e você deve estar pronto para arrasar:

  1. Baixe e instale o Node.js , que usamos para gerenciar nossas dependências.
  2. Faça o download das fontes do Bootstrap ou faça um fork do repositório do Bootstrap .
  3. Navegue até o diretório raiz /bootstrape execute npm installpara instalar nossas dependências locais listadas em package.json .

Quando concluído, você poderá executar os vários comandos fornecidos na linha de comando.

Usando scripts npm

Nosso package.json inclui os seguintes comandos e tarefas:

Tarefa Descrição
npm run dist npm run distcria o /dist/diretório com arquivos compilados. Usa Sass , Autoprefixer e terser .
npm test Executa testes localmente após a execuçãonpm run dist
npm run docs-serve Compila e executa a documentação localmente.

Corra npm runpara ver todos os scripts npm.

Comece com o Bootstrap via npm com nosso projeto inicial! Vá para o repositório de modelos twbs/bootstrap-npm-starter para ver como construir e personalizar o Bootstrap em seu próprio projeto npm. Inclui compilador Sass, Autoprefixer, Stylelint, PurgeCSS e ícones de Bootstrap.

Sass

Bootstrap v4 usa Node Sass para compilar nossos arquivos fonte Sass em arquivos CSS (incluídos em nosso processo de construção). Para terminar com o mesmo CSS gerado ao compilar Sass usando seu próprio pipeline de ativos, você precisará usar um compilador Sass que suporte pelo menos os recursos que o Node Sass oferece. Isso é importante observar porque, a partir de 26 de outubro de 2020, o LibSass e os pacotes criados sobre ele - incluindo o Node Sass - estão obsoletos .

Se você precisar de recursos Sass mais recentes ou compatibilidade com padrões CSS mais recentes, o Dart Sass agora é a principal implementação do Sass e suporta uma API JavaScript que é totalmente compatível com Node Sass (com algumas exceções listadas na página GitHub do Dart Sass ).

Aumentamos a precisão de arredondamento do Sass para 6 (por padrão, é 5 no Node Sass) para evitar problemas com o arredondamento do navegador. Se você usar Dart Sass, isso não será algo que você precisa ajustar, pois esse compilador usa uma precisão de arredondamento de 10 e, por questões de eficiência, não permite que ele seja ajustado.

Prefixador automático

O Bootstrap usa o Autoprefixer (incluído em nosso processo de compilação) para adicionar automaticamente prefixos de fornecedor a algumas propriedades CSS no momento da compilação. Isso nos economiza tempo e código, permitindo que escrevamos partes-chave do nosso CSS uma única vez, eliminando a necessidade de mixins de fornecedores como os encontrados na v3.

Mantemos a lista de navegadores suportados pelo Autoprefixer em um arquivo separado em nosso repositório GitHub. Consulte .browserslistrc para obter detalhes.

Documentação local

Executar nossa documentação localmente requer o uso do Hugo, que é instalado através do pacote hugo-bin npm. Hugo é um gerador de site estático incrivelmente rápido e bastante extensível que nos fornece: inclui básicos, arquivos baseados em Markdown, modelos e muito mais. Veja como começar:

  1. Execute a configuração de ferramentas acima para instalar todas as dependências.
  2. No diretório raiz /bootstrap, execute npm run docs-servena linha de comando.
  3. Abra http://localhost:9001/no seu navegador e voilà.

Saiba mais sobre como usar o Hugo lendo sua documentação .

Solução de problemas

Se você encontrar problemas com a instalação de dependências, desinstale todas as versões anteriores de dependência (global e local). Em seguida, execute novamente npm install.