Source

Construire des outils

Apprenez à utiliser les scripts npm inclus dans Bootstrap pour créer notre documentation, compiler le code source, exécuter des tests, etc.

Configuration de l'outillage

Bootstrap utilise des scripts npm pour son système de construction. Notre package.json inclut des méthodes pratiques pour travailler avec le framework, y compris la compilation de code, l'exécution de tests, etc.

Pour utiliser notre système de construction et exécuter notre documentation localement, vous aurez besoin d'une copie des fichiers source de Bootstrap et de Node. Suivez ces étapes et vous devriez être prêt à basculer :

  1. Téléchargez et installez Node.js , que nous utilisons pour gérer nos dépendances.
  2. Accédez au /bootstraprépertoire racine et exécutez npm installpour installer nos dépendances locales répertoriées dans package.json .
  3. Installez Ruby , installez Bundler avec gem install bundler, et enfin exécutez bundle install. Cela installera toutes les dépendances Ruby, telles que Jekyll et les plugins.
    • Utilisateurs Windows : Lisez ce guide pour faire fonctionner Jekyll sans problème.

Une fois terminé, vous pourrez exécuter les différentes commandes fournies à partir de la ligne de commande.

Utiliser des scripts npm

Notre package.json inclut les commandes et tâches suivantes :

Tâche La description
npm run dist npm run distcrée le /dist/répertoire avec les fichiers compilés. Utilise Sass , Autoprefixer et UglifyJS .
npm test Identique à npm run distplus il exécute des tests localement
npm run docs Construit et lint CSS et JavaScript pour les documents. Vous pouvez ensuite exécuter la documentation localement via npm run docs-serve.

Exécutez npm runpour voir tous les scripts npm.

Préfixe automatique

Bootstrap utilise Autoprefixer (inclus dans notre processus de construction) pour ajouter automatiquement des préfixes de fournisseur à certaines propriétés CSS au moment de la construction. Cela nous fait gagner du temps et du code en nous permettant d'écrire des parties clés de notre CSS une seule fois tout en éliminant le besoin de mixins de fournisseurs comme ceux trouvés dans la v3.

Nous maintenons la liste des navigateurs pris en charge via Autoprefixer dans un fichier séparé au sein de notre référentiel GitHub. Voir .browserslistrc pour plus de détails.

Documentation locale

L'exécution de notre documentation localement nécessite l'utilisation de Jekyll, un générateur de site statique assez flexible qui nous fournit : des inclusions de base, des fichiers basés sur Markdown, des modèles, etc. Voici comment démarrer :

  1. Exécutez la configuration des outils ci-dessus pour installer Jekyll (le constructeur de site) et d'autres dépendances Ruby avec bundle install.
  2. Depuis le répertoire racine /bootstrap, exécutez npm run docs-servela ligne de commande.
  3. Ouvrez http://localhost:9001dans votre navigateur, et voilà.

Apprenez-en plus sur l'utilisation de Jekyll en lisant sa documentation .

Dépannage

Si vous rencontrez des problèmes lors de l'installation des dépendances, désinstallez toutes les versions de dépendance précédentes (globales et locales). Ensuite, relancez npm install.