Astuce : Installer Bootstrap en un clique avec npm

Pour la majorité d’entre nous, installer Bootstrap se résume à télécharger les fichiers sources directement par le site officiel getbootstrap.com. Bien entendu, il existe des manières plus directes et « professionnelles » sans passer par le site. C’est le cas avec Nodejs et la commande npm.

Posté le par Benoît Philibert|505 vues

Node.js est un environnement d’exécution JavaScript qui vous permettra d’utiliser le langage côté serveur. C’est une nouvelle manière de développer avec JavaScript disponible depuis 2010.

Par l’intermédiaire de commande dans le terminal de votre ordinateur, vous pourrez télécharger et installer directement des packages tels que Bootstrap 4 sans passer par le site officiel de Bootstrap.

Installer Node.js

Il suffit de se rendre sur le site officiel de Node.js qui reconnaitra automatiquement l’OS de votre ordinateur pour vous faciliter le téléchargement le plus adéquat.

Une fois le téléchargement terminé, vous n’aurez plus qu’à installer Node.js sur votre ordinateur pour finir la manipulation.

Installer Bootstrap avec npm

Maintenant que nous avons Node.js sur notre ordinateur, ouvrez votre terminal pour lancer la commande d’installation npm de Bootstrap.

Il faut savoir que l’équipe Bootstrap a développer un package npmpermettant aux développeurs d’installer avec la commande npm et Node.js à distance.

Bootstrap

Découvrez la constitution du package npm de Bootstrap sur le site npmjs.com

Visiter la page du package npm Bootstrap

Une fois votre terminal ouvert, il vous suffit de définir l’endroit où installer Bootstrap sur votre ordinateur.

Astuce : Glissez le dossier qui accueillera l’installation bootstrap directement dans votre terminal puis appuyez sur « entrer ». Cela permet de définir le chemin de votre dossier au terminal.

Par la suite, entrez la commande ci-dessous et validez cette dernière en appuyant une nouvelle fois sur « entrer ». L’installation du package npm est très rapide.

npm install bootstrap

En une ligne de commande, votre installation est normalement terminée avec succès. Il faut avouer que le gain de temps et la propreté de l’exécution sont intéressants.

Contenu du package

bootstrap/
└── dist/
    ├── css/
    │   ├── bootstrap-grid.css
    │   ├── bootstrap-grid.css.map
    │   ├── bootstrap-grid.min.css
    │   ├── bootstrap-grid.min.css.map
    │   ├── bootstrap-reboot.css
    │   ├── bootstrap-reboot.css.map
    │   ├── bootstrap-reboot.min.css
    │   ├── bootstrap-reboot.min.css.map
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   └── bootstrap.min.css.map
    └── js/
        ├── bootstrap.bundle.js
        ├── bootstrap.bundle.js.map
        ├── bootstrap.bundle.min.js
        ├── bootstrap.bundle.min.js.map
        ├── bootstrap.js
        ├── bootstrap.js.map
        ├── bootstrap.min.js
        └── bootstrap.min.js.map
Il est important de noter que les fichiers JS et CSS sont minifiés.


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.