Pour construire un site Web, nous nous appuyons couramment sur un certain nombre de bibliothèques, que ce soit sous la forme de CSS ou de JavaScript. Si je devais construire un petit site Web qui affichera un diaporama d’images, par exemple, le site Web aurait probablement besoin de jQuery et d’un plugin jQuery, Flexslider. Ces bibliothèques sont les dépendances pour que le site Web fonctionne.
Alors que l’ajout de ces bibliothèques devrait être une tâche facile, quand il s’agit d’un site Web à grande échelle qui nécessite plus de bibliothèques, tout pourrait être encombrant et embrouillé dès le début. Vous pourriez avoir à chaluter d’un dépôt à un autre dépôt, à télécharger chacune des bibliothèques, à extraire les paquets et enfin à les mettre dans votre répertoire de projet.
Lorsque la nouvelle version sera disponible, vous devrez refaire tout cela (cela semble beaucoup de travail, n’est-ce pas ?).
Lectures recommandées : Animate.CSS – Bibliothèque CSS3 pour créer facilement des animations
Si cela ressemble à ce que vous faites depuis des lustres, cet article peut valoir la peine d’être lu. Ici, nous allons vous montrer un outil pratique appelé Bower qui rend la gestion des bibliothèques de sites Web un jeu d’enfant. Vérifions-le.
Démarrer
Pour utiliser Bower, vous devez installer Node.js. Puisque Bower est basé sur Node.js, vous devriez être en mesure d’exécuter Bower sur toutes les plateformes : Windows, Mac et Linux.
Une fois que vous avez installé Node.js, ouvrez Terminal (ou Command Prompt) et exécutez cette ligne de commande pour installer Bower.
npm install -g bower
Installation des bibliothèques
Maintenant, nous sommes prêts à utiliser Bower. Commençons par rechercher une bibliothèque que nous voulons mettre dans notre répertoire de projet. En supposant que vous êtes actuellement à l’intérieur du répertoire, vous pouvez taper bower search {name of the library}. Ici, par exemple, j’ai recherché Normalize.css, une bibliothèque pour rendre le style d’un élément cohérent dans tous les navigateurs.
bower search normalize
La commande va lister un tas de résultats ; non seulement qu’elle nous donne le Normalize original, mais elle nous montre aussi les versions de Normalize qui ont été converties en LESS, Sass, Stylus, et les autres plateformes.
Une fois que nous avons choisi celle à installer, nous pouvons taper bower install {{name of the repository}}. Dans cet exemple, je vais installer Normalize LESS ainsi que jQuery.
bower install normalize-less jquery
Cette commande va télécharger la dernière version de normalize-less et de jQuery, et l’enregistrer dans un nouveau dossier nommé bower_components ; vous devriez maintenant trouver le dossier créé dans votre répertoire de projet.
Alternativement, si vous voulez installer l’ancienne version de la bibliothèque, vous pouvez exécuter la commande suivie du numéro de version, de cette façon.
bower install jquery#1.10.0
Maintenant que nous avons les bibliothèques, Normalize et jQuery, dans notre répertoire de projet, nous pouvons les utiliser en référençant le jQuery du dossier bower_components dans le document HTML et en important Normalize LESS dans l’autre feuille de style LESS.
en HTML
<script src="bower_components/jquery/jquery.min.js"></script>
en LESS
@import "bower_components/normalize-less/normalize.less";
Si l’une des bibliothèques n’est plus utilisée dans le site web, vous pouvez la désinstaller facilement avec la commande bower uninstall, comme ceci.
bower uninstall normalize-less
Mise à jour des composants Bower
Disons que vous travaillez sur votre projet depuis plusieurs mois, et que certaines bibliothèques que vous utilisez (comme jQuery) ont sorti une nouvelle version. Dans cette circonstance, nous pouvons utiliser Bower pour mettre à jour jQuery à la dernière version. Mais vérifions d’abord si la nouvelle version a été enregistrée dans bower avec la commande bower list.
La dernière version de jQuery, comme vous pouvez le voir ci-dessous, est 2.1.1.
Pour mettre à jour jQuery, nous pouvons taper bower update jquery. Une fois la mise à jour terminée, vous pouvez exécuter à nouveau la commande bower list pour vérifier la version actuelle installée. Ci-dessous, comme vous pouvez le voir, nous avons maintenant la dernière version de jQuery.
Wrap Up
Bower est un outil vraiment pratique que je pense que vous devriez exploiter dans votre projet. C’est comme avoir un AppStore, mais pour vos trucs de site web – nous pouvons installer, mettre à jour et supprimer des bibliothèques de manière pratique.
Dans le prochain article, nous allons plonger dans Bower et explorer quelques fonctionnalités plus avancées. Alors restez à l’écoute.
